What is New in Tailwind CSS v4.0: CSS-First Engine Upgrades

The Tailwind Evolution

Tailwind CSS v4.0 marks a complete architectural rewrite. By replacing the previous JS-based configuration system with a Rust-powered parser and a CSS-first configuration model, v4.0 builds up to 10x faster and is much easier to customize.

1. Rust-Powered Compiler

The build engine is rewritten from scratch in Rust:

• **Faster Compiles**: Incremental builds compile in microseconds.
• **Automatic Content Detection**: You no longer need to specify a `content` array in your configuration. Tailwind automatically scans your project for markup classes.

2. CSS-First Configuration

Instead of a `tailwind.config.js` file, configuration now happens directly in your CSS entrypoint using standard CSS variables:

@import "tailwindcss";

@theme {
  --color-brand-primary: #10b981;
  --font-display: "Outfit", sans-serif;
  --breakpoint-xs: 320px;
}

All custom properties configured in the theme blocks are instantly exposed as utilities (e.g. `bg-brand-primary` and `font-display`).

3. Container Queries and Dynamic Modifiers

Tailwind v4.0 supports container queries natively:

• Use classes like `@container` and `@md:grid-cols-2` to style widgets based on the parent container's dimensions rather than the viewport size.
• Grid gradients and complex 3D transitions are simplified with shorter utility syntax.

Verdict

Tailwind v4.0 modernizes utility styling by shifting configurations back to CSS. This aligns the framework with native CSS custom properties, offering faster compilation and cleaner project setups.