TailwindCSS 4 is out
Tailwind CSS v4 drops the config file, revamps opacity handling, and brings a fresh new color system - a major overhaul of the beloved utility-first framework
Holy shit it's actually done — we just tagged Tailwind CSS v4.0.
It’s done indeed.
Tailwind is the css framework we all know and love for putting back in the html the style tag, only it now works in the class tag and takes care of a ton of stuff.
I’ve been recently upgrading this site to Tailwind 4 and I have mixed feelings. The opacity utilities are now gone and everything needs a /[opacityValue] in the end which I don’t like that much, mainly because now you need to be more specific in the light/dark mode values.
The upgrading tool is nice and does most of the heavy lifting, but you still will have some work to do.
Plugins in Tailwind 4
There is no tailwind.config.js file anymore, so wherever you @import 'tailwindcss'; , you will also need to @plugin '@tailwindcss/typography'; so you can continue to use this.
If you have external files which used @apply you’ll find they no longer work. You’ll have to use @reference "./tailwind.css"; to whatever relative route you have to your main tailwind. Otherwise you’ll find an Cannot apply unknown utility class Error in Tailwind v4.
Other than that, I’ve noticed colors look nicer but improvements in development speed are marginal in this microsite. I’ll migrate Notion to Calendar next where I expect something more noticeable.
There are many changes under the hood so take a look at the announcement blog post from the Tailwind team.