Space
Tailwind's 4px-based scale. Twelve steps from 2px (0.5) to 64px (16). Reach for 0.5 only for optical adjustments — layout should sit on whole steps.
01The scale
Each step shown as a visual bar plus its pixel value and its conventional role.
0.5
2px
Optical adjustments
Half-pixel nudges. Use when 1 looks too much and 0 looks too little — never for layout proper.
1
4px
Hairline gap
Between immediate sibling chips, segmented controls, inline icons next to text.
1.5
6px
Tight inline
Between an icon and its label inside a button. Between elements that should read as one.
2
8px
Default inline
Most inline spacing — form rows, sidebar nav items, list separators.
3
12px
Card padding (compact)
Compact card / list item internal padding. Sidebar item rhythm.
4
16px
Card padding (default)
Default card internal padding. Section spacing inside dense pages.
5
20px
Bridge
Bridges 4 and 6 when needed. Use sparingly.
6
24px
Stack rhythm
Between cards in a stack. Between settings rows. Between major form sections.
8
32px
Section rhythm
Between H2 sections on a docs page. Between major UI regions.
10
40px
Generous stack
Editorial / marketing rhythm. Settings page section breaks.
12
48px
Page section
Top-of-page header to first content section. Bottom-of-page padding.
16
64px
Major break
Above a brand-new content region. Between unrelated page sections.
02Composition rules
The shorthand we keep in mind when building layouts.
Inline gap. Default 2 (8px) for items in a row that read as separate but related — nav items, badge clusters, button groups.
Stack gap. Default 4 (16px) for cards or sections in a column. Bump to 6 (24px) when items are distinct enough to need air.
Container padding. Cards: 4 (16px) compact, 5–6 (20–24px) default. Page-level padding: 6 (24px) on mobile, 10–12 (40–48px) on desktop.
Section rhythm. 16 (64px) between major sections in a docs page. The big gap signals "new topic." Smaller gaps signal "same topic, next subsection."
When to break the scale. Almost never. If you find yourself reaching for an arbitrary value, the scale needs another step (rare) or you're solving the wrong problem (usually).