TailwindCSS v4 - upgrade experience report

[excid3]

First off, everything works great with Tailwind v4 beta. 🎉

One of the changes is that it uses CSS-first configuration now. This is helpful and makes the tailwind.config.js optional. In fact, the config can be specified inside the CSS now, for backwards compatibility.

@import "tailwindcss";
@config "../../config/tailwind.config.js";

v4 Also uses LightningCSS, so autoprefixer, postcss-present-env, etc are also no longer required.

The recommended way for configuring now is using CSS variables for everything and since the config is optional now, I would consider removing it from the installer.

Also probably need to re-evaluate how this is handled in compile_command. It seems like the config option is ignored if the file doesn't exist, so that didn't cause any issues with the upgrade for me.

One other thing that I would mention is their upgrade tool. A few of the class names have changed and TailwindCSS v4 now includes it's own built-in import support. The upgrade tool can take care of a good 90% or more of updating from v3.

npx @tailwindcss/upgrade@next

I'm not sure if it makes sense to do anything other than drop this into the README or an UPGRADE.md doc, but it is very helpful.

[flavorjones]

@excid3 Thanks so much for the experience report. I definitely want to update the documentation with an "upgrade" section so it's very helpful to have access to someone's experience other than my own.

If other folks want to add their notes there, I would be very thankful! 🙏