Good news, the TailwindCSS is out of beta.
v4.0 release Jan 22, 2025 by EST (Eastern Standard Time) UTC/GMT -5 hours.
Performance and Benchmark Results
One of the major achievements in Tailwind CSS v4.0 is the new high-performance engine. Through a complete architectural rewrite, the development team reports significantly faster build times and incremental rebuilds.
| Build Type | v3.4 (Median) | v4.0 Beta (Median) | Improvement Factor |
|---|---|---|---|
| Full build | 378ms | 100ms | 3.78× |
| Incremental rebuild (new CSS) | 44ms | 5ms | 8.8× |
| Incremental rebuild (no new CSS) | 35ms | 192µs | 182× |
The table demonstrates how incremental rebuilds without new CSS content can reach microsecond-scale response times, making development workflows more efficient.
Key changes
Thanks to the new approach, which focuses on pure CSS, you won't need to delve into the intricacies of JS customizations anymore.
Tailwind CSS v4.0 delivers a robust, forward-thinking architecture that emphasizes speed, simplicity, and deeper alignment with native CSS standards. Through CSS-first configuration, native cascade layers, expanded 3D transform utilities, and optimized gradient workflows, Tailwind CSS continues to push the boundaries of utility-first design.
CSS-First Configuration
A hallmark improvement in Tailwind CSS v4.0 is the CSS-first configuration. Instead of using a dedicated tailwind.config.js, developers can declare their design tokens directly within the CSS using an @theme rule:
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-400: oklch(0.92 0.19 114.08);
/* ... */
}
Automatic Source Detection
Tailwind CSS v4.0 reduces the need to manually configure the content array. By default, it scans source files based on common heuristics, automatically excluding paths in .gitignore or media files. If needed, specific sources may be added via:
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";
Built-In CSS Transpilation and Import
In v4.0, Lightning CSS integration seamlessly handles vendor prefixes, feature transpilation, and minification. Previously, a developer might rely on postcss-import or autoprefixer; these are now unnecessary:
@import "tailwindcss";
--
References
https://tailwindcss.com/docs/v4-beta
https://www.npmjs.com/package/tailwindcss
https://github.com/tailwindlabs/tailwindcss/tree/v4.0.0
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0
Top comments (0)