What is Tailwind CSS v4.0?
Tailwind CSS v4.0 is a major release of the utility-first CSS framework, published on January 22, 2025. It replaces the JavaScript configuration file with a CSS-first setup, integrates Lightning CSS as its compiler, and delivers full build speeds up to 5× faster than v3. The setup is reduced to a single @import statement.
What’s New in Tailwind CSS v4.0
Build performance
Tailwind v4 ships with a new engine built on Lightning CSS — a Rust-based CSS parser, transformer, bundler, and minifier. According to the official Tailwind CSS benchmark:
- Full builds: up to 5× faster than v3
- Incremental builds: complete in microseconds
Internal tests on existing projects showed full rebuilds at over 3.5× faster and incremental builds at over 8× faster compared to v3.
CSS-first configuration
One of the biggest changes in v4: the tailwind.config.js file is gone. All customizations live directly in CSS using the @theme directive:
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-500: oklch(0.84 0.18 117.33);
}Code language: CSS (css)This removes a context-switch between JS and CSS and keeps your design tokens co-located with your styles.
Simplified installation — 3 steps
No more @tailwind base/components/utilities directives. Setup is now:
1. Install
npm i tailwindcss @tailwindcss/postcssCode language: CSS (css)2. Configure PostCSS
export default {
plugins: ["@tailwindcss/postcss"],
};Code language: CSS (css)3. Import in CSS
@import "tailwindcss";Code language: CSS (css)postcss-import is no longer needed — Tailwind v4 handles CSS imports natively.
Modern CSS features
Tailwind v4 uses platform-native CSS capabilities that were unavailable at the time of v3:
| Feature | What it does |
|---|---|
| Native cascade layers | Controls style interaction across @layer theme, base, components, utilities |
Registered custom properties (@property) | Enables gradient animation; improves rendering on large pages |
color-mix() | Dynamic color opacity works with CSS variables and currentColor |
| Logical properties | Cleaner RTL support, smaller generated CSS output |
New utilities and variants
- Dynamic utility values and variants
- Container queries
- 3D transform utilities (
rotate-x-*,perspective-*) @starting-stylesupportnot-*variant- Expanded gradient APIs: linear angles, conic, radial, interpolation modifiers
- Modernized P3 color palette
Tailwind CSS v4 vs v3: Key Differences
| v3 | v4 | |
|---|---|---|
| Configuration | tailwind.config.js | @theme in CSS |
| Build engine | PostCSS + Node | Lightning CSS (Rust) |
| Setup | 3 directives | 1 @import |
| Full build speed | Baseline | Up to 5× faster |
| Incremental builds | Seconds | Microseconds |
| CSS variables | Limited | First-class via @theme |
postcss-import required | Yes | No |
Should You Upgrade?
Tailwind v4 is a breaking change for existing projects. Key migration considerations:
- The
tailwind.config.jsfile is not supported, customizations must be moved to@themein CSS - Some third-party plugins built for v3 may not yet support v4
- Official upgrade guide and a
@tailwindcss/upgradecodemod are available
For greenfield projects: v4 is the default choice. For production projects on v3: review the upgrade guide and test plugin compatibility first.
Frequently Asked Questions
What is the main difference between Tailwind CSS v3 and v4?
Tailwind v4 replaces JavaScript-based configuration (tailwind.config.js) with a CSS-native @theme directive and switches to a Rust-based build engine (Lightning CSS). The result is a simpler setup and significantly faster builds.
Is Tailwind CSS v4 backward compatible with v3?
No. Tailwind v4 is a breaking release. Projects using v3 need to migrate configuration from tailwind.config.js to CSS @theme blocks. Tailwind provides a codemod (@tailwindcss/upgrade) to assist with the migration.
How do I install Tailwind CSS v4?
Run npm i tailwindcss @tailwindcss/postcss, add "@tailwindcss/postcss" to your PostCSS config, and add @import "tailwindcss"; to your CSS entry file. No additional directives or imports are needed.
What is Lightning CSS in Tailwind v4?
Lightning CSS is a Rust-based CSS parser, transformer, bundler, and minifier. It powers Tailwind v4’s build pipeline and is responsible for the performance improvements over v3.
Does Tailwind CSS v4 require a configuration file?
No. Configuration in v4 is done entirely in CSS using the @theme directive. There is no tailwind.config.js in v4 projects.
Can I use Tailwind CSS v4 with React or Next.js?
Yes. Tailwind v4 works with Vite, Next.js, and other common setups. The official docs include framework-specific installation guides.
For frontend projects using Tailwind CSS, see fireup.pro’s Front-end Development Services.
