Last checked and updated on 17 May 2026
What Is New in Tailwind CSS 4.0
| Category | Highlights |
|---|---|
| New Features | High-performance engine, cascade layers, @property, color-mix(), container queries, 3D transforms, expanded gradient APIs, @starting-style variant, not-* variant, CSS-first configuration, theme variables, dynamic utilities |
| Improvements | Full builds up to 5× faster, incremental builds >100× faster, zero-config installation, built-in import support, first-party Vite plugin, automatic content detection |
| Breaking Changes | Tailwind config moved from tailwind.config.js to a CSS @theme block, @tailwind directives removed, content array no longer required, plugins for import and Vite are now built-in |
How much faster is Tailwind CSS 4.0's build engine?
Tailwind CSS 4.0 rebuilds are up to five times faster for full builds and over one hundred times faster for incremental builds that add no new CSS.
In practice this means a typical full rebuild drops from ~380 ms to ~100 ms, while a no-change incremental rebuild goes from ~35 ms to just 192 µs.
Benchmark (median)
Full build: 378 ms → 100 ms (3.78×)
Incremental (new CSS): 44 ms → 5 ms (8.8×)
Incremental (no new CSS): 35 ms → 192 µs (182×)
This matters if you run Tailwind in watch mode on large codebases; the editor feels instantly responsive.
What does the new CSS-first configuration look like and how does it replace tailwind.config.js?
In v4 you define your design tokens, breakpoints, and custom utilities directly inside a @theme block in your CSS file, eliminating the need for a separate tailwind.config.js.
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-500: oklch(0.84 0.18 117.33);
--spacing: 0.25rem;
}
All values become native CSS variables, so you can reference them in inline styles or JavaScript without extra tooling.
Which modern CSS features does Tailwind CSS 4.0 leverage?
Tailwind 4.0 is built on native cascade layers, registered custom properties with @property, color-mix(), and logical properties.
- Cascade layers give deterministic ordering of base, components, and utilities.
- @property lets you animate custom properties such as gradient stops with full browser support.
- color-mix() enables opacity control on any color, including CSS variables and
currentColor. - Logical properties (e.g.,
margin-inline) simplify RTL handling and reduce generated CSS size.
These features shrink the final stylesheet and open up runtime possibilities like dynamic theming.
How do container queries and new utilities like 3D transforms work out of the box?
Container queries are now core utilities, and you can use 3D transform classes such as rotate-x-*, scale-z-*, and perspective-* without any plugin.
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">...</div>
</div>
<div class="perspective-distant">
<article class="rotate-x-51 rotate-z-43 transform-3d">...</article>
</div>
Use the @min-* and @max-* variants to create range-based container queries, e.g., @min-md:@max-xl:hidden.
How does automatic content detection simplify project setup?
Tailwind 4.0 automatically scans all files that are not ignored by .gitignore or binary extensions, so you no longer need to maintain a content array.
If you need to force-include a folder, add an @source directive right after the import.
@import "tailwindcss";
@source "../shared/ui";
This matters for monorepos or libraries where template files live outside the default scan paths.
Frequently Asked Questions
Does upgrading to Tailwind CSS 4.0 require a new configuration file?
No you replace tailwind.config.js with a @theme block inside your main CSS file.
How do I install Tailwind CSS 4.0 with the Vite plugin?
Run npm i tailwindcss @tailwindcss/vite and add import tailwindcss from '@tailwindcss/vite' in your vite.config.ts plugins array.
Can I still use arbitrary values after the dynamic utility changes?
Arbitrary values still work, but many utilities now accept any numeric value directly, so you often don't need the bracket syntax.
What browsers support the new @starting-style variant?
The @starting-style feature is currently supported in Chrome 119+, Edge 119+, and Safari Technology Preview; other browsers will fall back gracefully.
How do I add a custom source folder that Tailwind might ignore?
Add an @source directive in your CSS like @source "../shared/components" to force Tailwind to scan that folder.
Is the old @tailwind directive still valid in v4?
The @tailwind directive has been removed; you now import Tailwind with @import "tailwindcss" and all layers are generated automatically.