Inset
Padding inside a component. p-inset-*, and its directional forms.
inset-xs
4px · ref.space.1
inset-sm
8px · ref.space.2
inset-md
16px · ref.space.4
inset-lg
24px · ref.space.6
Gap
Between siblings. gap-gap-* on a flex or grid container. Grouping comes from this scale doubling at each level, never from a border.
gap-xs
4px · ref.space.1
gap-sm
8px · ref.space.2
gap-md
16px · ref.space.4
gap-lg
24px · ref.space.6
Section
Page rhythm, the vertical air between one section and the next.py-section-*.
section-sm
40px · ref.space.10
section-md
64px · ref.space.16
section-lg
96px · ref.space.24
The ramp
ref.space.N maps 1:1 onto Tailwind's numeric scale, sop-4 and gap-2 are already on the rhythm. Use it when no intent-named role fits. Never an arbitrary value (p-[13px]); if the ramp lacks a step, add it.
ref.space.0
0px
ref.space.1
4px
ref.space.2
8px
ref.space.3
12px
ref.space.4
16px
ref.space.5
20px
ref.space.6
24px
ref.space.8
32px
ref.space.10
40px
ref.space.12
48px
ref.space.16
64px
ref.space.20
80px
ref.space.24
96px
ref.space.32
128px
Page measures
Two containers, two jobs. A paragraph set to the page width stops being readable long before the page stops being held, so nest them, measureinside page, and never substitute one for the other.
page · 72rem
max-w-page
Outer bound of a layout. Keeps every section edge on the same line down the scroll.
measure · 62ch
max-w-measure
Reading line for prose. Follows the font, so it stays right when the type scale moves.