The Core Vocabulary

Open the mockup of an existing interface and measure the padding of its boxes: 12, 16, 15, 20, 14, 24 pixels. Nobody decided on that 15, or that 14. They appeared because one day some text overflowed by two pixels, and a padding: 15px fixed the problem faster than stopping to think about the grid. Multiply those one- or two-pixel discrepancies by two years of patches, and you get an interface that everyone finds vaguely off without being able to say why.

Tailwind makes this kind of drift difficult, because it doesn't give you a continuum of values but a scale. p-3 is 12 pixels, p-4 is 16, and there is nothing in between. The first reflex, when you need 15 pixels, is to look for a way to force the value. The right reflex is to pick 16: in 95% of cases, no user will see the difference, and you've just gained a consistent interface. This lesson presents the core vocabulary, but its real subject is this: knowing when to stay within the scale and when to step outside it.

Spacing

A single unit governs the whole grid: 1 equals 0.25rem, or 4 pixels in a default configuration. Multiply it by the number written in the class.