Spacing
Two fluid measures set the rhythm of every page: the section padding and the side gutter. Inside blocks, Tailwind's 4 px steps.
Measures, to scale
The four widths drawn against the page width (72rem), then the two fluid measures read from this page. Resize the window and the numbers move.
- max-w-kh-page
Page content, 72rem (1152 px)
- max-w-kh-narrow
Section headers, docs, 48rem (768 px)
- max-w-kh-prose
Long-form text, 40rem (640 px)
- max-w-kh-lead
Descriptions under titles, 34rem (544 px)
px-kh-gutter
Side gutter of a section
py-kh-section
Top and bottom padding of a section
Spacing tokens
Both are clamps on the block's container width, so a block in a sidebar breathes less than one on a full page.
| Tailwind | Value | Use for |
|---|---|---|
py-kh-section | clamp(4rem, 2rem + 6cqi, 7.5rem) | Top and bottom of a section |
px-kh-gutter | clamp(1.25rem, 0.5rem + 3.2cqi, 2.5rem) | Sides of a section |
max-w-kh-page | 72rem | Page content width |
max-w-kh-narrow | 48rem | Section headers, docs |
max-w-kh-prose | 40rem | Long-form text |
max-w-kh-lead | 34rem | Descriptions under titles |