Tailwind CSS v4: What's New

CSS-first configuration

The biggest shift in Tailwind v4 is moving configuration from tailwind.config.js to a CSS file. Instead of a JavaScript object, you define your theme directly in CSS using custom properties:

@import "tailwindcss";

@theme {
  --color-bg: #0F0B1E;
  --color-accent: #A78BFA;
  --font-sans: "DM Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

This is a meaningful improvement. Your design tokens live in CSS, where they belong, and are directly usable as CSS variables throughout your stylesheets.

Oxide engine

Tailwind v4 ships with a new Rust-based engine called Oxide. Build times drop significantly on large projects — the Tailwind team reports up to 5× faster full builds and 100× faster incremental builds.

For most small projects, this won’t feel dramatic. For larger codebases, it’s noticeable.

Composing variants

Variant stacking is cleaner in v4. You can now compose multiple variants more intuitively:

<div class="group-hover:not-disabled:text-accent">
  ...
</div>

What stays the same

The utility class system is unchanged. If you’ve been writing Tailwind, your muscle memory still applies. The migration path for most projects is straightforward, and the team has published a comprehensive upgrade guide.