Alter styling for django-unfold 0.56+

[thclark]

Bug report

Styling of the widget no longer works in new versions of unfold admin. We discovered in issue unfoldadmin/django-unfold#1299 that this is to do with unfold dropping tailwind 3 support and adding tailwind 4. I assume that a bunch of classes got chopped around and/or prefixed differently so the widget now isn't styled correctly.

Workaround: pin to unfold 0.55 for now.

What is the current behavior?

Works great with unfold <= 0.55 which relies on tailwind 3 but on higher versions the widget looks like this:

What is the expected behavior?

Should be styled normally.

Proposed Solution

We previously relied on tailwind classes that were available in unfold, which was super convenient because we didn't have to have a build process and could use the same colours, theme and everything as in unfold.

Now, Lukas recommends we go back to conventional CSS styling but that'll be a pain, the whole point of unfold is to be able to use tailwind.

Perhaps we can replicate our previous system but update to tailwind 4 (not sure if it's quite so simple now) but if not we'll have to have our own build system for the CSS and either reverse engineer to figure out the unfold theme variables and use them, or not bother theming it.

Sponsorship welcome!

[lukasvinclav]

@thclark

1. Unfold does not remove built-in classes. It still contains a large set of CSS classes which can be used without configuring your own build system.
2. In this case border-base-200, dark:border-base-800, and rounded-default are required.

PS: if you find Tailwind class which is missing, let me know and I can consider safelisting it.