Tailwind CSS v4: What Has Really Changed and Who Should Make the Switch

Tailwind CSS is one of the most widely used tools for styling web interfaces. Version 4 brought the biggest change in its history: a new core, a different configuration method, and the promise of significantly faster builds. That’s one reason why it’s often praised in superlatives. What has been proven, what are its limitations, and for whom is the transition worth considering?

This isn't this week's news

Version 4.0 was released in January 2025, so this is a change that developers have been familiar with for nearly two years. For readers who haven’t dealt with it yet, it’s helpful to know exactly what it brought and whether it affects them.

New engine and speed

The developers rewrote the framework’s core and named it Oxide. According to the description, it is written in Rust, and during the production build, CSS passes through the Lightning CSS tool, which handles prefixes, minification, and the transformation of modern properties.

What the metrics show

The developers report that full builds are up to 5 times faster and incremental builds more than 100 times faster. Specific measurements on their own project showed the following medians:

• Full build: from 378 ms to 100 ms (approximately 3.8 times faster).
• Incremental build with new CSS: from 44 ms to 5 ms (approximately 8.8 times faster).
• Incremental build without new CSS: from 35 ms to 192 microseconds (more than 180 times faster).

How to Interpret These Numbers

These are measurements taken by the framework’s developers themselves on a single project, not an independent test. Our sources have not confirmed the claim of a “10-fold speedup.” The greatest speedup applies to incremental builds, where nothing new is compiled. The difference in your project depends on its size and configuration. It’s also important to note that CSS compilation is usually only part of the entire application build, so the speedup of the entire process may not be as significant. This is our conclusion, not a claim based on the measurements.

Configuration directly in CSS

The most noticeable change for developers is that the framework is no longer configured primarily in the tailwind.config.js, but directly in CSS using directives such as @theme. The basis is a single line @import "tailwindcss";, instead of the original three directives. Style values, such as colors and fonts, are made available as native CSS variables.

Automatic file recognition

Version 4 automatically recognizes template files, so a list of paths in the configuration is usually no longer necessary.

What hasn't changed

The claim that the configuration file in JavaScript is “a thing of the past” is an exaggeration. According to the available documentation, version 4 still supports it via the @config. It is also not true that the framework has completely abandoned the Node.js environment. The migration tool requires Node.js version 20 or later.

Modern CSS features

Version 4 takes advantage of newer CSS features, such as layers (@layer), registered properties (@property) and the color-mix(). Other new features include expanded support for the P3 color space, built-in container queries, utilities for 3D transformations, enhanced color gradients, and a new variant not-*.

Limitation: older browsers

An important note that is often omitted in enthusiastic articles: due to modern CSS features, version 4 targets newer browsers. According to available overviews, this includes Safari 16.4 and newer, Chrome 111 and newer, and Firefox 128 and newer. If you need to support older browsers, you can stick with version 3.4.

Migration from version 3

For existing projects, an automated migration tool is available that can update dependencies, convert the configuration file to CSS, and modify templates. The developers recommend running it on a new branch, thoroughly reviewing the changes, and testing the project in a browser. The tool is not a magic solution: after migration, you’ll need to check the appearance and your custom configurations.

What we haven't confirmed

• Memory and CPU savings, and thus savings in cloud service minutes. The sources we found discuss speed, not resource consumption. Therefore, we cannot claim any savings during deployment.
• “No more configuring build tools.” This is an unsubstantiated marketing claim. The method of integration (such as a plugin for Vite or PostCSS) may change, but configuration doesn’t completely disappear.

Who Will Benefit from the Transition

For a new project targeting modern browsers, version 4 is a reasonable choice. For large existing applications that support older browsers or have extensive custom configurations, it’s better to plan the migration carefully and test it on a separate branch.

Conclusion

Tailwind CSS v4 brought some truly significant changes: a new engine, configuration via CSS, and the use of modern CSS features. The authors themselves confirmed the speed improvements through their own measurements, but contrary to the headlines, not everything is revolutionary: configuration via JavaScript still works, support for older browsers is limited, and the benefits for your project need to be verified through testing.