Tailwind CSS v4: What's New and How to Migrate

Tailwind v4 is a ground-up rewrite. Builds are dramatically faster, configuration moves into CSS, and theme values become real CSS variables you can use anywhere. Here is what changes.

CSS-First Configuration

The big shift: configure your theme in CSS with @theme instead of a JavaScript config file.

@import "tailwindcss";

@theme {
  --color-brand: #84cc16;
  --font-display: "Inter", sans-serif;
  --spacing-128: 32rem;
}

Every token becomes a CSS variable, so you can reference var(--color-brand) in custom CSS without duplicating values.

Faster Builds, Zero Config Content Detection

• The new Oxide engine compiles full builds up to 5x faster and incremental builds in microseconds.
• Automatic content detection — no more content: [] globs in most projects.
• Native cascade layers (@layer) and color-mix() for opacity instead of generated utilities.

Upgrading

npx @tailwindcss/upgrade@latest