The essence of this new version allows to facilitate installation but also the customization of Tailwind CSS.
Improved Performance
For example, we can see on the official Tailwind CSS website this table that represents the enormous performance increase when working with the CSS framework:
| v3.4 | v4.0 | Difference | |
| Full build | 378ms | 100ms | 3.78x better |
| Incremental rebuild with new CSS code addition | 44ms | 5ms | 8.8x (in other words, it's instantaneous) |
| Incremental rebuild without new CSS code addition | 35ms | 192μs | 182x (magical) |
We can see that the enormous difference is in the almost immediate refresh of classes generated by Tailwind CSS when we add CSS code or not. In short, a magical rebuild. 💫
Simplified Customization (css-first)
With versions prior to Tailwind CSS 4 we had to use the tailwind.config.js file to customize our classes.
module.exports = {
theme: {
extend: {},
},
plugins: [],
};Now, that's a thing of the past!
Tailwind CSS 4 can be managed in your default stylesheet with a single import.
@import "tailwindcss";
@theme {
--font-display: "Roboto", "sans-serif";
--breakpoint-3xl: 1920px;
--color-primary-100: oklch(0.99 0 0);
--color-primary-200: oklch(0.98 0.04 113.22);
--color-primary-300: oklch(0.94 0.11 115.03);
--color-primary-400: oklch(0.92 0.19 114.08);
--color-primary-500: oklch(0.84 0.18 117.33);
--color-primary-600: oklch(0.53 0.12 118.34);
/* ... */
}It's simpler. Everything is in our stylesheet (that's why we talk about a css-first concept here).
Advanced Features
Tailwind CSS 4 doesn't just optimize performance but also supports the latest CSS features supported by browsers.
For example, the new color-mix property is now usable by Tailwind CSS classes:
@layer theme, base, components, utilities;
@layer utilities {
.mx-6 {
margin-inline: calc(var(--spacing) * 6);
}
.bg-blue-500\/50 {
background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}
}
@property --tw-gradient-from {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}We also notice that Tailwind CSS v4 now decomposes its utility classes and components with very different rules:
@layer utilities / @utility- to define a utility class;@layer component- to define a component (.btn for example);@variant- to define a variant;@property- to define a variable.
From now on, you'll need to use this to activate dark mode when a dark class exists on an element:
@custom-variant dark (&:where(.dark, .dark *));
New Colors with OKLCH
Tailwind CSS v4 now uses a new approach to manage colors in its color palette by using OKLCH.
Although little used compared to its RGB alternative, it allows for more modern/precise colorimetry.
According to the Tailwind CSS team, this change was made because new screens can support a richer palette with varied colors unlike what RGB can handle.
Simplified Installation
Tailwind CSS v4.0 is now simpler to install: a single line is enough to load utility classes in our stylesheet:
@import "tailwindcss";
Automated Content Detection
Now, no need to specify the files that contain our Tailwind CSS utility classes.
Everything is done for us!
These folders are for example ignored from now on if they are added to your .gitignore file because Tailwind CSS v4 reads it automatically:
/node_modules
/coverage
/.next/
/buildAll binary files (like zip files, images, videos, etc.) are also ignored.
Improvements to Arbitrary Values
With Tailwind CSS v4 we can now use on-the-fly classes:
<div class="grid grid-cols-15">
<!-- ... -->
</div>This code generates a 15-column grid while Tailwind CSS v4 only has a grid up to 12 columns by default. We could have specified grid-cols-300 and it would have generated a grid with 300 columns in one go.
Container Query Integration
Container queries are now supported by Tailwind CSS v4:
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
<!-- ... -->
</div>
</div>Here for example @container declares the first <div> as a reference: the browser observes its width rather than that of the viewport.
Thanks to the @sm:grid-cols-3 and @lg:grid-cols-4 utilities, the second <div> switches to 3 then 4 columns when the container reaches the sm and lg thresholds, making the grid autonomous and truly responsive.
Improved 3D Transformation
Tailwind CSS v4.0 now supports classes that allow the use of three-dimensional transformations.
For example, we now have rotate-x-*, rotate-y-* and scale-z-*.
Don't hesitate to check the documentation to properly use this new possibility with Tailwind CSS v4.0.
Conclusion
In short! Here are the new features of Tailwind CSS v4!
Want to upgrade to version 4? A single command is enough:
npx @tailwindcss/upgrade@nextWant to get trained? Our dedicated Tailwind CSS 4 training is already available to guide you and make you a true front-end expert.