Three relatively recent CSS features have changed what is possible without JavaScript and how stylesheets stay maintainable: the :has() relational pseudo-class (a 'parent selector'), native CSS nesting, and cascade layers (@layer). Each addresses a long-standing limitation, and Tailwind interacts with all three — :has() as a variant, nesting in your custom CSS, and cascade layers as the very mechanism that organises Tailwind's own output.
:has() lets a parent style itself based on its descendants — something CSS could never do before, forcing JavaScript for cases like 'highlight this field group if it contains an invalid input'. Native nesting lets you write related rules inside one another, as preprocessors long allowed. Cascade layers let you declare explicit precedence groups so specificity battles become predictable.
Understanding these matters because they push more behaviour into pure CSS (less JavaScript), make custom CSS cleaner, and — in the case of layers — explain how Tailwind guarantees that a utility can reliably override a component style. They are the modern CSS that makes a Tailwind codebase both more capable and more predictable.
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.
🏏 Showing the Cricket analogy — a Cricket version isn’t available for this concept yet.