Tailwind CSS v4: What Changed and Why It Matters
Tailwind CSS v4 is a major release — not just an incremental update, but a rewrite of the engine underneath. After migrating two production projects, here's my take on what matters.
The New Engine
The most impactful change is the new Oxide engine. Build times dropped noticeably in my projects, especially on larger codebases where Tailwind used to add seconds to the dev server startup.
CSS-First Configuration
Gone is tailwind.config.js. Configuration now lives in your CSS file using @theme directives. This felt strange at first but quickly grew on me — your design tokens are right where you use them.
What I Had to Change
- Moved all config from
tailwind.config.jsto@themeblocks in CSS - Updated a few class names that were renamed for consistency
- Replaced
@applyin some places where native CSS nesting now works better
Is It Worth Upgrading?
Yes. The faster builds alone justify the migration, and the CSS-first configuration is genuinely better once you adjust. The migration path was smoother than I expected — most of my utility classes worked without changes.
If you're starting a new project, v4 is the clear choice. For existing projects, plan a migration sprint — it's not a weekend side project, but it's not painful either.