Spacing & sizing
The spacing scale, padding, margin, and width/height constraints — the bones of every layout.
The spacing scale
Spacing utilities (`p-*` padding, `m-*` margin, `gap-*` for flex/grid) draw from a consistent numeric scale where each step is `0.25rem` (4px). So `p-4` = 16px, `p-6` = 24px, `p-12` = 48px. Using the scale instead of arbitrary values is what keeps a UI visually consistent.
You get directional control too: `pt-*` (top), `pr-*` (right), `pb-*` (bottom), `pl-*` (left), `px-*` (horizontal), `py-*` (vertical). Same for margin. Negative margins use `-m-*` and `-mt-*` for overlap effects.
On the default spacing scale, `p-6` equals…
Width, height & constraints
Sizing utilities let you set width (`w-*`) and height (`h-*`) using the same spacing scale. Beyond fixed sizes, the constraint utilities min-width (`min-w-*`), max-width (`max-w-*`), min-height (`min-h-*`), and max-height (`max-h-*`) keep layouts from breaking at extremes.
The most important one: `max-w-prose` (~65ch) for readable text, `max-w-screen-lg` to constrain page sections, and `w-full` / `h-full` for filling containers. The `size-*` shorthand sets both width and height together.
w-full / h-full
Fill the parent container. Pair with max-w-* to set an upper bound.
max-w-prose
~65 characters wide — the optimal reading line length. Use on article and paragraph containers.
min-h-screen
At least the viewport height. Used for full-page sections and sticky footers.
size-*
v4 shorthand: sets both width and height. size-12 = w-12 h-12. Great for avatars and icons.
Which utility sets the optimal reading width (~65 characters)?