Tailwind CSS 4: What's New

A New Engine

Tailwind CSS 4 ships a brand-new, Rust-based engine called Oxide. It's significantly faster than the previous JIT engine and handles incremental builds even better on large codebases.

CSS-First Configuration

Gone is the tailwind.config.js file. Configuration now lives entirely in CSS:

@import "tailwindcss";

@theme {
  --color-brand: oklch(55% 0.2 250);
  --font-sans: "Inter", system-ui, sans-serif;
  --radius-lg: 1rem;
}

Custom tokens defined in @theme are automatically available as utilities (text-brand, font-sans, rounded-lg).

Automatic Content Detection

You no longer specify a content array. Tailwind 4 scans all files in the project automatically, eliminating a whole category of "class not generated" bugs.

New Utilities

• field-sizing — auto-resize textareas
• inert — style inert elements
• starting-style — animate elements from their initial state
• @starting-style support for enter/exit transitions

Migrating from v3

The official migration guide handles most changes automatically:

npx @tailwindcss/upgrade

Manual work is usually minimal — mainly replacing darkMode: 'class' with the new @variant dark syntax.

Tailwind CSS 4 is a major improvement in developer experience, especially the CSS-native configuration story.