What's Actually Different in Tailwind CSS v4

First Build and I Was Like "Wait, What?"

When I first ran Tailwind v4, it was fast. Not joking -- CSS build went from 1.2 seconds to 0.15 seconds. An 8x difference. They rewrote the engine in Rust (they call it Oxide), completely replacing the JavaScript engine, so the performance gap is inevitable.

But there was a change even more surprising than the build speed.

tailwind.config.js Is Gone

This is v4's biggest change. The config file is gone. You configure directly in your CSS file now. Define design tokens with @theme, load plugins with @plugin.

At first I thought "why would they remove the config file?" But after using it, it's actually more convenient. Want to change colors or fonts? Just open the CSS file. Before, I'd bounce between the config and the CSS file -- that's gone now. (Honestly, I've lost track of where the config file was and had to search for it before.)

CSS Variables Just Work

In v3, using Tailwind colors as CSS variables required some setup. In v4, all design tokens are automatically exposed as CSS variables. Just use --color-blue-500, --spacing-4 directly.

This really shines for dark mode implementation. Define --color-background: #ffffff; in @theme, override it with --color-background: #0a0a0a; in .dark, and you're done. No separate darkMode configuration needed. "Reduce configuration" is v4's philosophy, and CSS variables are the key to that.

New Utilities I Started Using Right Away

text-wrap-balance distributes line breaks evenly -- my blog titles stopped bunching to one side. size-* sets both w-* and h-* at once, handy for square elements like icons. Official @container support for container queries also landed. Responsive handling for components like cards that appear in various contexts got way easier.

Migration Was Almost Automatic

Running npx @tailwindcss/upgrade handles most of it. For my blog, the auto-conversion success rate was about 95%. The rest was custom plugin stuff that I fixed manually. Converting custom utilities written in JavaScript for v3 to v4's CSS approach took some time. (Lost half a day on this part, and it made me wonder whether I even needed those custom plugins in the first place.)

Bundle Got Smaller on Its Own

28KB in v3, 22KB in v4. I didn't do anything special -- the new engine just filters out unused utilities more accurately. Can users tell the difference between 22KB and 28KB in loading time? Honestly, no. But when things get smaller without you lifting a finger, that's a win.

Some Rough Edges Still

Third-party UI library compatibility isn't perfect yet. shadcn/ui officially supports v4, but other libraries are still v3-based and class conflicts occasionally pop up. And community resources are still largely in v3 syntax. Google a Tailwind solution and odds are it's v3, so you need to mentally translate to v4. Time will fix this.

Start New Projects on v4

v4 is a genuinely meaningful upgrade. No more config file, native CSS variables, blazing build speed. DX is clearly better. Even if you're happy with v3, start new projects on v4. Once you try it, you won't want to go back. I didn't.