Spacing
A consistent spacing scale using CSS variables. Tailwind's default spacing scale uses the same values and can be used interchangeably.
Spacing Scale
13 spacing tokens from 0px to 96px. The scale follows a harmonious progression with common increments.
spacing-0
0px
spacing-1
4px
spacing-2
8px
spacing-3
12px
spacing-4
16px
spacing-5
20px
spacing-6
24px
spacing-8
32px
spacing-10
40px
spacing-12
48px
spacing-16
64px
spacing-20
80px
spacing-24
96px
Common Use Cases
Component Padding
spacing-3 (12px) — Small padding
spacing-4 (16px) — Default padding
spacing-6 (24px) — Card padding
Section Spacing
spacing-16 (64px) — Section padding mobile
spacing-20 (80px) — Section padding tablet
spacing-24 (96px) — Section padding desktop
Gaps
spacing-2 (8px) — Icon gaps
spacing-4 (16px) — Element gaps
spacing-8 (32px) — Section gaps
Usage
Tailwind Classes (Recommended)
p-4 (16px), p-6 (24px), gap-4, gap-8py-16 lg:py-24 (section spacing)CSS Variables
padding: var(--spacing-6);gap: var(--spacing-4);Section Patterns
Standard responsive section padding:
py-16 lg:py-24 — Vertical section paddingpx-4 sm:px-6 lg:px-8 — Horizontal content padding