What’s New in Tailwind CSS 4.0? Faster Builds, Oxide Engine, and Modern Features

Tailwind CSS 4.0 has been released, promising a five‑fold increase in build speed and aiming for a 100‑times improvement in incremental builds, while adding new CSS capabilities and a single‑import installation method. However, the documentation notes that core features require the latest web browsers, which may limit early adoption.

The framework’s main new feature is a brand‑new build engine codenamed “Oxide.”

Oxide is 35 % smaller than previous engines. Although most of it is written in TypeScript, it includes Rust‑rewritten packages for calculating the most resource‑intensive operations and uses Lightning CSS, a Rust‑based CSS parser.

Tailwind CSS 4.0 is optimized for Vite (JavaScript and TypeScript) and ships with an official Vite plugin that, according to creator Adam Wathan, provides “maximum performance with minimal configuration.”

New CSS features include cascade layers, which give structured specificity, and CSS‑registered custom properties that can have default values and be set to inherit or not. Wathan says these modern features simplify Tailwind’s internals and make maintenance easier.

How to Use

Including Tailwind in a project is simple—just add the following import: @import "tailwindcss"; Add the import to a CSS file. Tailwind can be installed via npm, though npm is not required; other package managers or standalone tools also work.

When used with frameworks such as Next.js, Angular, SvelteKit, or Astro, Tailwind is typically integrated through PostCSS plugins or the Vite plugin, and a CLI is available for any project.

Configuration has moved from a JavaScript file to the CSS itself via theme variables. The old JavaScript config is still supported but must be explicitly loaded.

The color palette has switched from RGB to Oklch (the Oklab color space), adding chroma and hue coordinates for richer colors. A new 3D transform API enables scaling, rotation, and other transformations.

Developers must be aware of browser compatibility: Tailwind CSS 4.0 requires Chrome 120+, Safari 16.4+, or Firefox 128+ for core features. Tailwind 3.0 was more forgiving, recommending avoidance of unsupported features on older browsers.

Upgrade tools are provided, but there are still migration challenges; the full upgrade guide lists the breaking changes.

Tailwind CSS is open‑source under the MIT license. Unlike Meta’s Bootstrap, Tailwind does not ship advanced components (those are available in the commercial Tailwind UI).

The 2023 CSS State of the Union (2024 results pending) reported that Tailwind is the UI framework most developers intend to keep using, with a 50.5 % usage rate and 75.7 % retention. Bootstrap’s usage remains high but is slightly declining, while Materialize CSS ranks third at 21.7 %.

Conclusion

Discussions about Tailwind’s advantages show differing opinions, including debates over using native CSS without a build step. Wathan created Tailwind to address the challenges of maintaining large CSS files in big projects. Some developers are uneasy about the volume of breaking changes, but many appreciate the reduced dependencies and performance gains. Browser compatibility remains a concern, and early adopters tend to be cautious until the framework proves stable for their users.