Tailwind CSS v4, released in January 2025, is not an incremental update. It is a ground-up rewrite that fundamentally changes how the framework is configured, how styles are compiled, and how design tokens flow from definition to utility class. For teams that have built design systems on Tailwind v3, this release demands attention.
CSS-First Configuration
The most visible change is the elimination of the JavaScript configuration file. In Tailwind v4, all customization happens directly in CSS using the @theme directive. Colors, spacing scales, font families, border radii, and every other design token are defined as CSS variables within your stylesheet, replacing the tailwind.config.js file entirely. This is not just a syntactic change; it means your design tokens are native CSS custom properties that can be referenced by any tool in your pipeline, not just Tailwind.
The @theme directive supports namespaced sections for organizing tokens by category. A typical setup might define colors, typography, and spacing in separate @theme blocks, each generating a corresponding set of utility classes. The framework reads these definitions at build time and produces only the utilities your templates actually use, maintaining the zero-waste philosophy that made Tailwind popular in the first place.
The Oxide Engine
Under the hood, Tailwind v4 is powered by a new compilation engine called Oxide, written in Rust. The performance difference is not subtle. In benchmarks published by the Tailwind team, full builds of large projects complete up to ten times faster than v3, and incremental rebuilds during development are nearly instantaneous. For teams working in monorepo environments with thousands of components, this translates to a meaningfully faster feedback loop during development.
Oxide also brings improved dead-code elimination. The engine performs deeper analysis of template usage patterns, pruning unused utilities more aggressively and producing smaller output files. In testing across several open-source projects, output CSS size decreased by fifteen to twenty-five percent compared to equivalent v3 configurations.
Modern CSS Features
Tailwind v4 leans into modern CSS capabilities. Container queries, cascade layers, and the @starting-style rule for entry animations are all supported with dedicated utility classes. The framework also introduces first-class support for wide-gamut colors through the OKLCH color space, giving designers access to more vibrant, perceptually uniform color palettes than the sRGB-limited options of previous versions.
Migrating from v3
The Tailwind team provides an official upgrade tool that handles the most common migration patterns automatically, including converting tailwind.config.js to @theme directives and updating deprecated class names. Most projects can complete the migration in under an hour. For teams with heavily customized configurations, the CSS-first approach actually simplifies long-term maintenance, since the configuration is colocated with the styles it governs rather than hidden in a separate JavaScript file.
