Typography and color carry most of an interface's perceived quality, yet in raw CSS they are where inconsistency multiplies fastest: every developer reaches for a slightly different font size, a slightly off shade of gray, a one-off line height. The result is interfaces that feel subtly incoherent without anyone being able to point at why. Tailwind addresses this by expressing type and color as scales too — a font-size scale that pairs each size with a sensible line height, a color system organised into named hues with numbered shades from 50 to 950, and background utilities that compose with those colors. By turning text and color into the same kind of constrained, named choices as spacing, Tailwind makes a polished, harmonious look the default rather than something a designer must police shade by shade.
30 minbeginner
Typography, Colors and Backgrounds
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.
Lesson 4 of 35
0% complete