Tailwind CSS v4: Oxide engine, CSS-first and no more JavaScript config

On January 22, 2025, Tailwind Labs released version 4 stable. After months of alpha and beta, the most widespread CSS framework of 2024 ships with a new Rust engine and a renewed philosophy: less JavaScript, more CSS.

The Oxide engine

The new engine, called Oxide, is written in Rust and Lightning CSS. The numbers Tailwind Labs reports:

• Full builds 3.5x faster.
• Incremental builds up to 100x faster.
• Startup time materially reduced.

On our real projects we measured a dev server refreshing in ~50ms versus ~280ms on v3. CI builds show a smaller but still tangible improvement.

CSS-first configuration

Goodbye tailwind.config.js: in v4 configuration lives in CSS via @theme.

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.65 0.18 250);
  --font-display: "Inter Tight", sans-serif;
  --breakpoint-3xl: 1920px;
}

The benefit is not just aesthetic: theme tokens become real CSS variables, accessible at runtime. For designers working with shared Figma–code tokens, this opens a door.

Native container queries

Container queries, previously available via @tailwindcss/container-queries, are now core. The syntax:

<div class="@container">
  <div class="@md:grid-cols-2"> ... </div>
</div>

For anyone building design systems whose components live in containers of varying width, this is a big shift. Media queries remain for page layout; container queries are for component design.

Native modern CSS support

• color-mix(): used internally for opacity variants without tricks.
• oklch(): default colour scales are expressed in oklch with more uniform perceived luminosity.
• Cascade layers (@layer): fewer conflicts with custom CSS.

Migration

From v3 to v4 there is an official upgrade tool that does most of the work:

npx @tailwindcss/upgrade

Across our projects the tool solved 95% of the changes. The remaining 5% is usually:

• Custom plugins not yet updated.
• Deep tailwind.config.js overrides (e.g., color system extensions).
• Find-and-replace for renamed classes (few).

Browser baseline rose: Safari 16.4+, Chrome 111+, Firefox 128+. For projects that must support older browsers, stay on v3 as long as needed.

Verdict after a month in production

Across 4 migrated projects, zero meaningful regressions and a snappier dev server. The CSS configuration was the bigger surprise: after a few days, going back to config.js feels clunky. For new projects, v4 is the default. For older ones, migration is optional but recommended within the year.