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-20 (80px) — Section padding, mobile through tablet

128px — Section padding from lg. Deliberately past the top of the scale (96px), so it has no --spacing-* step.

There is no separate tablet step: the rhythm is py-20 lg:py-32.

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-20 lg:py-32 (section spacing)

CSS Variables

padding: var(--spacing-6);gap: var(--spacing-4);

Section Patterns

Standard responsive section padding:

py-20 lg:py-32 — Vertical section paddingpx-4 sm:px-6 lg:px-8 — Horizontal content padding

The desktop py-32 is 128px, deliberately past the top of the --spacing-* scale, which stops at 96px (--spacing-24). Section rhythm is the one place the scale is exceeded on purpose.

ToolsIUse is a deliberate exception at py-12 lg:py-16 — it's a slim logo strip, so the full rhythm would leave it floating in empty space.