Upgrade to Tailwind 4

[WarningImHack3r]

Tailwind 4 is finally out!

We manually upgraded with @MinixBF using the migration guide. Unfortunately, the migration script didn’t work due to a cryptic error, and we had to go over everything by hand.

I also used some of the new features of Svelte 5 introduced during the advent of Svelte, namely built-in clsx and svelte/reactivity/window, to fix Tailwind no longer recognizing Svelte class directives (tailwindlabs/tailwindcss/discussions/15312).

Pain points

• The migration script isn’t working with the latest Node version to date: Could not load the configuration file: localAPI.addDefaults is not a function
• The migration guide doesn't state that we have to install @tailwindcss/postcss (same for /vite, though this one is obvious from the import in the example) it turns out it's not even useful anymore; all of that is gone!
• There is no way to add a custom background-image - the docs tell us to use --color but it doesn't work with that
• The Prettier plugin doesn't seem compatible with v4 by not being able to read its config, misplacing a lot of classes that will have to be reverted at some point
• Some cursor-pointer styles seem gone from the Preflight despite not being mentioned anywhere
• backdrop-blur are also concerned by the "blur migration" despite not being called out
• class: directives are broken (see discussion linked above) edit: it works when reordering the Vite plugins, which is not what the official installation docs state!
• There is no way to simply extend an existing property (e.g. --font-sans: MyFont, var(--font-sans);) without creating a new property
• There is no way to differentiate between text colors and background colors, leading to naming conflicts (e.g. different values for text-primary and bg-primary)