Flexbox with Tailwind — Tailwind CSS & Modern CSS

Before flexbox, laying out a row of items that aligned nicely, spaced evenly, and survived different content lengths meant a grim toolkit of floats, inline-block hacks, negative margins, and the dreaded clearfix. Vertical centering alone was a running joke in the industry. Flexbox was invented to make one-dimensional layout — a row or a column — declarative: you describe how children should distribute and align along an axis, and the browser computes the geometry. Tailwind exposes flexbox as a tight family of utilities (flex, justify-*, items-*, gap-*, flex-1) that let you express these layouts inline without leaving your markup. Mastering flex is non-negotiable because the overwhelming majority of real UI — navbars, toolbars, button rows, cards with a footer pinned to the bottom — is one-dimensional, and flex is the right tool for all of it.

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.