Tailwind CSS 4.0 released with ‘ground-up rewrite’ for faster Rust-powered build

Tailwind CSS 4.0 released with ‘ground-up rewrite’ for faster Rust-powered build
Writing code

Tailwind CSS 4.0 is out, promising up to 5x faster build times, or 100x for incremental builds, as well as new CSS features and installation with a single import statement, though documentation that states a requirement for recent web browsers for core functionality may limit initial take-up.

The key feature of this popular CSS framework and toolset is a new build engine codenamed Oxide. This engine is 35 percent smaller than before, and while mostly written in TypeScript it includes packages rewritten in Rust for the most computationally expensive operations, as well as making use of Lightning CSS, a CSS parser which is also written in Rust.

Tailwind CSS 4.0 is now optimized for the Vite JavaScript and TypeScript build tool, and has a first-party Vite plugin that offers, according to the release post by Tailwind creator Adam Wathan, “maximum performance and minimum configuration.” 

New CSS features in the framework include cascade layers, which provides structured specificity, addressing one of the trickiest features of CSS. Another new feature is use of CSS registered custom properties, allowing properties with default values that can be set to inherit or not inherit their value. According to Wathan, use of modern features like these has simplified Tailwind internally making maintenance easier.

Including Tailwind in a project can be as simple as adding:

@import “tailwindcss”;

to a CSS file, once Tailwind has been installed with npm (Node Package Manager) – though npm is not essential and a standalone tool is also available. Using the framework with Next.js or Angular would typically use the PostCSS plugin, or the Vite plugin for SvelteKit or Astro, for example. There are also Tailwind gems for Ruby on Rails, and a CLI (command line interface) tool for using Tailwind with any project.

Configuration has shifted from a JavaScript file to CSS itself, using theme variables. The old JavaScript configuration file is still supported, but must be loaded explicitly.

The color palette in Tailwind CSS 4.0 has changed from rgb (red green blue) to oklch (Oklab color space) which adds chroma and hue coordinates for richer colors. A new 3D transform API allow scaling, rotation and more.

Developers always have to be wary of browser compatibility issues and Tailwind CSS 4.0 requires a recent browser, specifically Chrome 120 or higher, Safari 16.4 or higher, or Firefox 128 or higher – dating from 2023 or in the Firefox case, July 2024. The docs say these are required for “core functionality” whereas the docs for Tailwind 3.0 were more forgiving, suggesting that developers avoid unsupported features if targeting older browsers, though Internet Explorer was not supported at all.

There are also some upgrade issues, though there is an upgrade tool provided. A full upgrade guide lists breaking changes.

The Tailwind CSS framework is open source under the MIT license. Unlike Meta’s Bootstrap, Tailwind CSS does not include high-level components though these are available in TailwindUI, which requires a commercial license.

The 2023 State of CSS survey (the 2024 results are not yet published) stated that “Tailwind CSS stands apart as the one major UI framework that developers are happy to keep using,” based on usage of 50.5 percent and retention plans of 75.7 percent. Bootstrap had higher usage but in slight decline. Between them, these two frameworks dominate the space, with the third placed Materialize CSS at 21.7 percent usage.

Discussion of the merits of Tailwind shows diverse opinions, including arguments for using vanilla CSS without a build step. Wathan created Tailwind though precisely because of the challenges of maintaining CSS files in large projects. There is some unhappiness over the number of breaking changes, but as one dev said “fewer dependencies and better performance are always welcome.”

Browser compatibility is a concern though and as with most initial releases, developers will be cautious about early adoption in production until they are confident that it will work for their users.