Tailwind CSS v4.0 was released in January, and we've spent the last couple of weeks using it on two live projects: a new landing page build and an internal dashboard we migrated from v3. Short version: it's faster, simpler to set up, and a bit of a mental shift if you've used Tailwind for years.
Configuration moved into CSS
The biggest change is that tailwind.config.js is no longer the centre of everything. You now import Tailwind in your CSS file and define your theme with an @theme block using CSS variables. Colours, fonts, spacing, breakpoints, all declared in CSS.
At first this felt odd. After a few days it felt obvious. Your design tokens are now real CSS custom properties, which means you can use them anywhere, including in plain CSS or inline styles, without any special function.
It's noticeably faster
The new engine is quick. Full builds on our dashboard project dropped from a few seconds to well under one, and incremental rebuilds while editing are basically instant. On a small site you won't feel it much. On a large app with hundreds of templates, it's a real quality-of-life improvement.
Less setup
Content detection is automatic now. You don't have to list every template path; Tailwind figures out where your classes are. For our PHP projects, where views live in app/Views, it picked them up without any configuration. There's also a first-party Vite plugin if you're using Vite.
Modern CSS features built in
v4 leans on things browsers support well now: cascade layers, @property, color-mix(), and container queries out of the box. Container queries in particular are great for component-based layouts. A card can change its layout based on the width of its container instead of the whole screen.
The default colour palette also moved to OKLCH, which gives more vivid, consistent colours. Some of our existing designs looked slightly different after the upgrade, so check your brand colours carefully.
What tripped us up
- A few utility names changed or were renamed for consistency. The official upgrade tool handled most of it, but we still found some classes it missed in PHP templates with dynamic class strings.
- The default border colour changed, so some borders suddenly looked different.
- Older browsers are no longer supported. v4 targets recent versions of Safari, Chrome and Firefox. For most audiences this is fine, but if your users are on old devices, check before upgrading.
Should you upgrade?
For new projects, yes, start on v4. For existing v3 projects, there's no urgency. v3 still works fine. We'd upgrade when you're already doing a round of design changes, so the testing effort isn't wasted.
We still don't think Tailwind is right for every team. Some people love utility classes, some find the HTML too noisy. But if you're already in the Tailwind camp, v4 is the best version yet.
