Tailwind v4 — The Biggest Rewrite in Its History

Tailwind CSS v4, released in early 2025 and now the standard in 2026, is a ground-up rewrite. The familiar utility-class DX you love is unchanged — but the engine, configuration, and theming system are completely new.

Key Changes

1. CSS-First Configuration

No more tailwind.config.js. Configuration lives entirely in your CSS file using the new @theme directive:

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: oklch(60% 0.25 270);
  --font-sans: "Inter", sans-serif;
  --spacing-18: 4.5rem;
  --breakpoint-3xl: 120rem;
}

Every CSS variable you define in @theme becomes a Tailwind utility automatically. bg-primary, font-sans, mt-18 — all available instantly.

2. Lightning CSS Engine

Tailwind v4 uses Lightning CSS — a Rust-powered CSS processor that handles prefixing, minification, and modern CSS transforms. Build times drop 5-10x compared to v3 with PostCSS.

3. P3 Color Space & OKLCH

The default color palette now uses OKLCH for perceptually uniform color scales. Colors look better on P3-capable displays (most modern screens) and degrade gracefully on older ones.

4. Variant Composition

<!-- Stack variants naturally -->
<div class="hover:focus:bg-primary/80 dark:md:text-lg">

Arbitrarily complex variant stacking now compiles efficiently — no performance penalty for deep nesting.

Migration from v3

# Use the official codemod
npx @tailwindcss/upgrade@latest

The codemod handles most breaking changes automatically. Manual review needed for:

• Custom plugins using the old JS API — rewrite with CSS or the new plugin API
• Theme values accessed in JS (e.g., resolveConfig) — switch to CSS custom properties
• Deprecated utilities (overflow-ellipsis → text-ellipsis)

Should You Upgrade?

For new projects: start with v4 — it's the future and the DX is cleaner. For existing v3 projects: the codemod makes migration low-risk. The build speed improvement alone justifies the upgrade for large projects.