Spacing
An 8px rhythm on Tailwind's 4px scale. Compose with the scale — never arbitrary pixel values — so density stays consistent across products.
The scale
Tailwind step → rendered size. Steps above 4 should land on the 8px rhythm.
14px
Icon-to-label gaps, tight chip padding
28px
Gaps inside compact controls; the base rhythm unit
312px
Padding inside inputs and table cells
416px
Default gap between related elements; card padding (compact)
624px
Card padding (default); desktop grid gutters
832px
Gap between sibling groups inside a section
1040px
Section padding on small screens
1248px
Gap between page sections
1664px
Hero / landing block separation
Rules of thumb
- Related things sit closer than unrelated things — label to input at
gap-1.5, field to field atgap-4, section to section atgap-12. - Prefer
gap-*on the parent over per-child margins. - No
p-[13px]-style arbitrary values — if a design calls for one, the design is off-scale, not the code.