Tailwind v4 Features and Migration — Tailwind CSS & Modern CSS

Tailwind v4 is a ground-up rewrite that changes how you configure the framework, how it processes CSS, and what it ships by default. The biggest shift is architectural: v4 moves configuration out of a JavaScript file and into CSS itself using @theme and @import, eliminates the separate PostCSS config for most setups, ships natively with a Rust-based engine (Lightning CSS) for dramatically faster builds, and makes the layer system and cascade layers first-class. Understanding what changed and why matters whether you are starting a new project (v4 is the default) or maintaining an existing one (migration is not trivial but is mechanical).

Beyond the architectural changes, v4 promotes several features that were plugins or workarounds in v3 — container queries, 3D transforms, starting-style, and a P3 color space — into the core, and it changes how custom values, arbitrary properties, and the config interact. The result is a framework that feels more like CSS with superpowers and less like a JavaScript build tool that generates CSS.

This lesson covers the key v4 changes, the new CSS-first configuration model, the migration path from v3, and the features that are new or promoted. If you have been using v3, understanding v4 is about recognising what moved (config into CSS), what improved (speed, built-in features), and what needs updating (the syntax that changed).

Analogy🏏Cricket

🏏 Think of it like cricket: Picture the Indian team walking out for a one-day international, and instead of a fixed batting line-up they could only bat using eleven pre-named 'specialist' players who each do exactly one thing. Traditional CSS is like inventing a brand-new specialist for every single delivery — a 'cover-drive-against-spin-in-the-43rd-over' player who is never reused. Just as a captain who must invent a fresh role for every ball would drown in selection paperwork, a developer inventing a new semantic class for every component drowns in naming and dead stylesheets. Just as a smart captain instead combines a small fixed set of reliable skills — defend, rotate strike, loft over mid-on — to handle any situation, utility-first combines a small fixed set of classes to build any design. The insight is that expressiveness comes from composition of primitives, not from an ever-growing vocabulary; a few dozen reusable skills cover infinite match situations, just as a few hundred utilities cover infinite layouts.