Modern CSS with Tailwind, 2nd Edition

Padding and Margins

Padding and margins aren’t next to each other—they’re always separated by the border. But Tailwind handles them similarly enough that it’s easy to talk about them together.

Tailwind provides, if I’m counting correctly, 245 different classes to manage padding (not counting arbitrary values). I’m not going to list them all here (though the Tailwind documentation^[12] does), because there’s a pattern to them: p{direction}-{size}.

All the padding classes start with p, followed by an optional character for the direction. Six directions exist: t, b, l, and r for top, bottom, left, and right, respectively; x for horizontal (meaning left and right); and y for vertical (meaning top and bottom). If there’s no direction character, the ...