Tailwind v4: A Complete Rewrite

Tailwind CSS v4 is not just an update — it’s a ground-up rewrite with a new engine written in Rust. The results are dramatic.

What Changed

1. CSS-First Configuration

No more tailwind.config.js. Everything is in CSS:

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
  --breakpoint-sm: 640px;
}

2. Automatic Content Detection

No more content: ['./src/**/*.{html,js}']. Tailwind v4 automatically detects your source files.

3. 10x Faster Builds

The new Oxide engine (Rust) makes builds nearly instant:

  • Initial build: ~5ms (was ~50ms)
  • Incremental: <1ms (was ~10ms)
  • HMR: Essentially instant

4. Native CSS Nesting

<div class="hover:[&>span]:text-blue-500">
  <span>Hover parent to color me</span>
</div>

5. New Utilities

  • text-wrap-balance — Balanced text wrapping
  • size-* — Sets width AND height simultaneously
  • inset-shadow-* — Inner shadows with utility classes

Migration from v3

npx @tailwindcss/upgrade

The migration tool handles 95% of changes automatically. Main manual fixes needed:

  • Move config from JS to CSS @theme block
  • Replace @apply with CSS (where possible)
  • Update any custom plugin syntax