Tailwind CSS v4 is not just an update. It is a complete rebuild from the ground up. If you use Tailwind daily, this article saves you hours of reading and gives you the most important practical changes.
What Changed in v4?
The fundamental shift is that Tailwind v4 completely drops tailwind.config.js and moves to a CSS-first approach. All configuration now lives inside your CSS file using @theme.
The Old Way (v3)
In v3 you wrote in tailwind.config.js:
theme: { extend: { colors: { brand: "#1E40AF" } } }
The New Way (v4)
In v4 you write directly in your CSS file:
@import "tailwindcss"; @theme { --color-brand: #1E40AF; }
This means values are now real CSS variables you can use anywhere: in JavaScript, plain CSS, or the browser DevTools.
10x Faster: The Oxide Engine
One of the biggest changes is the new Oxide engine written in Rust.
Full builds are 5x faster than v3. Incremental builds are 100x faster and nearly instant. No separate PostCSS plugin needed in most modern tools.
Automatic Content Detection
In v3 you had to manually specify content paths. In v4, Tailwind detects files automatically based on .gitignore and your project structure. Less config, fewer mistakes.
CSS Variables as Design Tokens
Every value in @theme becomes a CSS variable automatically, making your design tokens available everywhere: in JavaScript, plain CSS, and DevTools, not just in Tailwind classes.
Dynamic Utility Values
In v4 you can write any value directly without arbitrary value syntax:
<div class="mt-17 w-23 text-15">
Tailwind v4 generates utilities dynamically from its own scale, no extra config needed.
Is the Upgrade Worth It?
For new projects: absolutely yes. Start with v4 directly. Simpler setup, better performance, more consistent system.
For existing projects: assess the scope of changes. If you use complex theme configs or many plugins, the upgrade takes time. But if you have a real performance problem, the gains are worth it.