gap & the spacing scale

ONE variable → the entire spacing scale

In v3, every spacing step (p-1, p-2, …) was a hardcoded rem value in a lookup table. In v4, the whole scale collapses into a single multiplier: calc(var(--spacing) * N). Default --spacing: 0.25rem (4px), so p-4 = calc(0.25rem * 4) = 16px. Any integer works (p-13, p-17) — no theme extension needed.

1 · drag --spacing → every utility rescales live

The slider sets --spacing on :root at runtime. Because every utility references var(--spacing), the two probes below (p-4 padding and gap-4 column-gap) rescale instantly — no recompile, no class changes. (Click the readout to reset to the 0.25rem default.)

2 · the spacing scale (visualized)

Each bar's width is a Tailwind w-* utility — so the bar IS calc(var(--spacing) * N) rendered. Drag the slider above and watch every bar grow/shrink in lockstep. The numeric readout is the live computed width.

⚡ v4 dynamic scale: unlike v3's fixed lookup table, v4 generates calc(var(--spacing) * N) for any integer N. p-13, p-17, p-42 all work out of the box.

3 · gap-* : identical in flexbox and grid

gap-* maps to the CSS gap property (or column-gap / row-gap via gap-x-* / gap-y-*). It works in both flex and grid containers — unlike old margin-based spacing, gap doesn't collapse and doesn't leak outside the container.

gap-x-* sets column-gap only; gap-y-* sets row-gap only. Useful when you want tight rows but loose columns (or vice versa). Drag the --spacing slider and these rescale too — gap-6 is just calc(var(--spacing) * 6).

4 · arbitrary spacing — the escape hatch

When the scale doesn't fit, use bracket notation. The value is emitted verbatim — it does not reference var(--spacing), so it won't rescale with the slider. This is the escape hatch, not the norm.

Reach for arbitrary values only for genuine one-offs (a Figma token, a fluid clamp()). For values that should track the system density, prefer the integer scale (p-13) so they rescale with --spacing.

intent → pattern