Generate a custom Tailwind spacing scale from your own base unit — visualized as proportional bars, exported as v3 config, the v4 –spacing variable, or CSS custom properties.
Settings
Generated locally in your browser — your settings and results never leave this page.
One rhythm for every gap
Tailwind’s spacing feels coherent because every value shares one grid — by default 0.25rem per step. Change that base and the whole design tightens or breathes. This generator rebuilds the scale on YOUR base unit, visualized as proportional bars so you can judge the rhythm before committing, and exports it in each configuration dialect.
The v3/v4 difference that matters here
v3 lists every token in a config object. v4 collapsed spacing to a single --spacing variable the entire scale derives from — set it once, every p-*, m-*, gap-* and size utility follows. The v4 output shows the one-variable form first, with per-token overrides only as the documented exception.
Worked example (v4)
@theme {
--spacing: 0.375rem; /* 6px grid — airier than default */
}When to change the base
- Dense data UIs: 2–3px bases fit more per screen.
- Marketing sites: 5–6px bases breathe.
- Matching an existing design system’s grid (8pt systems → base 8 with halves).
Limitations
- Changing the base rescales EVERYTHING — audit key screens after switching, since p-4 no longer means 16px.
- Named steps stay Tailwind’s (0.5–96); fully custom step lists belong in a hand-edited config.
How to use the Tailwind Spacing Generator
- Set your base unit (px per step) and how far the scale extends.
- Choose rem or px output — rem respects user font-size settings.
- Read the proportional bars to sanity-check the rhythm.
- Export as v3 config, the v4 –spacing variable, or CSS custom properties.
Frequently asked questions
How does Tailwind's default spacing scale work?
Every step is a multiple of 0.25rem (4px): p-4 is 1rem, p-8 is 2rem. That single rhythm is why Tailwind layouts feel consistent — this generator keeps the same token names on your own base.
How is spacing configured differently in v4?
v4 derives the ENTIRE scale from one –spacing variable — set it to 0.3rem and every utility follows. Per-token overrides exist but are the exception; the v4 output shows both patterns.
Should spacing be rem or px?
rem, almost always: it scales when users raise their browser font size, an accessibility win. px is for the rare design that must stay fixed regardless of text size.
