Tailwind CSS 4: What's New and Why It Matters

The Big Changes

OKLCH Color System

Tailwind 4 uses OKLCH colors instead of HSL. Why does this matter?

OKLCH provides perceptually uniform colors. That means oklch(0.7 0.15 180) and oklch(0.7 0.15 90) look equally bright to human eyes — something HSL can't guarantee.

:root {
  --primary: oklch(0.65 0.2 250);
  --primary-foreground: oklch(0.98 0.005 250);
}

@plugin Directive

No more tailwind.config.js. Plugins are loaded directly in CSS:

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Lightning CSS Engine

Tailwind 4 uses a Rust-based CSS engine that's dramatically faster. Build times dropped from seconds to milliseconds in my projects.

CSS-First Configuration

Configuration moved from JavaScript to CSS:

@theme {
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
}

Migration Tips

1. Remove tailwind.config.js — Move config to globals.css
2. Update color references — HSL → OKLCH
3. Check plugin compatibility — Some v3 plugins need updates
4. Test dark mode — The new color system handles dark mode differently

Is It Worth Upgrading?

Absolutely. The build speed improvement alone justifies the migration. Plus, the OKLCH color system produces more vibrant, consistent designs with less effort.