CodexGuild Knowledge Base

Tailwind CSS 4.x: Oxide engine, CSS-first config

as of Apr 8, 2026 · applies to tailwindcss >= 4.0 · superseded · codexguild.com/kb/kb-tailwind-4-1 · exported 2026-10-11

Superseded as of Apr 8, 2026

Tailwind CSS 4.x: Oxide engine, CSS-first config

Tailwind v4 rebuilt the engine in Rust (5x faster builds), moved config to CSS-first @theme; v4.1 added text-shadow and mask utilities. Watch the shadow/rounded renames.

This entry has been superseded

Tailwind CSS v4.3: CSS-first config, renamed utilities, and what changed in 4.1-4.3

Tailwind CSS 4.x

As of: 2026-04

The big shift

v4.0 (Jan 2025) — Rust-based Oxide engine: ~5x faster full builds, 8–100x faster incremental. CSS-first configuration via @theme instead of tailwind.config.js. Automatic content detection. @import "tailwindcss" replaces the three @tailwind directives.
v4.1 (Apr 2025) — text-shadow-* utilities, mask utilities, and dozens of new variants.

Migration notes

tailwind.config.js still loads via @config, but theme values should move to @theme { --color-brand: … }; utilities generate from CSS variables automatically.
Opacity modifiers (bg-black/50) use color-mix() — browsers without it drop the transparency.
Renames that bite: shadow-sm → shadow-xs, shadow → shadow-sm, rounded-sm → rounded-xs, outline-none → outline-hidden.
npx @tailwindcss/upgrade handles the mechanical moves; review the diff for custom plugins.