Tailwind CSS v4 is the biggest update in the framework’s history. A rewritten engine, a new config format, and native CSS variables instead of config-class mappings. Let’s break down what changed and whether you need to migrate.

New Engine: 10x Faster

Tailwind v4 replaces the old engine with Oxide — written in Rust. Compile time for a large project dropped from 1–2 seconds to 100–200 ms. Incremental builds are near-instant.

CSS-First Configuration

The biggest change: instead of tailwind.config.js, you configure directly in CSS:

@import "tailwindcss";

@theme {
  --color-brand: #22d3ee;
  --font-heading: "Inter", sans-serif;
  --radius-card: 1rem;
}

All custom values automatically become CSS variables and utility classes. No more JavaScript for configuration.

Native CSS Variables Instead of Hardcoded Values

In v3, bg-blue-500 compiled to background-color: #3b82f6. In v4 — to background-color: var(--color-blue-500). This enables dynamic theming without JavaScript.

What Else Is New

  • @starting-style support for enter animations
  • New variants: in-*, nth-*, not-*
  • field-sizing for auto-resizing textareas
  • Improved container queries syntax
  • Deprecated utilities removed and API simplified

Migrating from v3

There’s an official upgrade tool: npx @tailwindcss/upgrade. It automatically converts most changes. But there are breaking changes — the prose plugin, some variants, and browser support (no IE, no Safari 15 and older).

Should You Migrate Now?

New project — definitely v4. Existing project — evaluate the risks: tests, CI/CD, team bandwidth. If you have a clear refactoring window — migrate. The gains in build speed and config cleanliness are noticeable.