The Dawn of a New Compiler Engine
Tailwind CSS v4.0 is a complete reimagining of the framework's internal pipeline. By migrating the core build step from a JavaScript-based compiler to an incredibly fast compiled engine written in Rust, builds are now up to 10x faster, ensuring sub-millisecond hot-module reloads during local development.
"We wanted to build a compiler that gets completely out of the developer's way. Every millisecond saved during live edits translates directly to improved flow state."
CSS-First Configuration
Say goodbye to the monolithic tailwind.config.js file. In v4.0, configuration takes place directly inside your main stylesheet using native CSS custom properties and @theme directives. This integrates deeply with CSS cascade specs and lets you define tokens using standard syntax:
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--font-display: "Space Grotesk", sans-serif;
--breakpoint-xs: 420px;
}Native Cascade Layers
Tailwind v4 organizes its styles using standard CSS cascade layers (@layer). This guarantees perfect style priority resolution, preventing utility styles from conflicting with third-party CSS imports, custom base elements, or complex inline styles.
By leveraging native CSS rules, you get cleaner browser devtool inspection sessions and predictable styling results, regardless of how complex your stylesheet import trees grow.
