Tailwind CSS 4.0 boosts performance
Tailwind CSS 4.0 has been updated with a Rust-powered engine, replacing the previous JavaScript implementation for a reported 5x improvement in build times. The new version also introduces native CSS configuration. These changes are intended to reduce friction for developers working on large-scale design systems and improve overall workflow speed.
- Incremental builds see a performance boost of over 100x, with rebuilds that don't require new CSS completing in microseconds. Full rebuilds are over 3.5x to 5x faster. - The new version integrates Lightning CSS for transpilation, which handles vendor prefixes and modern CSS features, eliminating the need for separate tools like Autoprefixer or `postcss-import`. - Configuration has moved from a JavaScript file (`tailwind.config.js`) to CSS-first, allowing developers to define design tokens and customizations directly within a CSS file using `@theme`. - All design tokens are now exposed as native CSS variables, allowing them to be easily used in inline styles or passed to JavaScript libraries for animations. - The creator, Adam Wathan, developed Tailwind CSS as a byproduct of a side project in 2017; the business behind it, Tailwind Labs, later launched Tailwind UI which generated nearly $2 million in its first five months. - The v4.0 engine is a ground-up rewrite that migrates the most performance-intensive and parallelizable parts of the framework to Rust, while keeping the core in TypeScript to maintain extensibility. - New features include a modernized P3 color palette for more vivid colors on modern displays, first-class support for container queries, 3D transform utilities, and expanded gradient APIs for radial and conic gradients. - The setup is simplified with automatic content detection that crawls the project to find template files, meaning no manual configuration of file paths is needed for most projects.
