Tailwind v4 represents the most significant architectural shift since the framework's inception. The move to a CSS-native engine means zero JavaScript at runtime, but the real story is what this unlocks for design systems at scale.
The Zero-Runtime Promise
In v3, the JIT compiler was a breakthrough. In v4, the engine is replaced entirely with a Rust-based CSS processor that outputs static stylesheets with no runtime overhead. For portfolio sites that prioritize Core Web Vitals, this is transformative.
css
/* v4 uses native CSS cascade layers */
@layer base, components, utilities;
@theme {
--color-primary: oklch(65% 0.25 250);
--spacing-section: 4rem;
}Design Token Integration
The new @theme directive bridges the gap between design tokens and utility classes. You define tokens once and Tailwind generates the corresponding utilities automatically—no plugin configuration required.
- Native CSS variables for every token
- OKLCH color space support out of the box
- Container queries as first-class utilities
- Automatic dark mode via prefers-color-scheme