One 4px scale for gaps and padding, three distances that group a screen, and the grid a page sits on.
Everything sits on a 4px grid. Space does the grouping before any line does: things that belong together are close, things that do not are at least twice as far apart. A gap is always a step of the scale, never a number picked by eye.
Tailwind's spacing steps, one unit to 4px. These eleven cover every gap and padding in the kit; the ones between them are for optical corrections only.
A screen needs three of them. Pick the distance by what the two things are to each other, then take a step from its range.
| Where | Step | Rule |
|---|---|---|
| A control | px-2.5 to px-3.5 | 10 to 14px a side. The side with a leading icon is 2px tighter, so the icon and the label look centred. |
| A menu or a well | p-1 | 4px around its rows, and the rows' corners are the outer radius less that 4px. |
| A card | p-4 | 16px, or 12px in a dense list of cards. The gap between its parts is the same step. |
| A dialog | p-5 to p-6 | 20 to 24px: more room than a card, because it stands alone. |
| A page | 20 / 32 / 40px | The gutter on a phone, a tablet and a desktop. Content never touches the edge of the screen. |
A page picks one column by what it is for, and centres it. Inside the column, tiles and cards sit on a grid that divides it evenly: two, three or four across, set by the room the grid is given rather than by the size of the screen.