Spacing & sizing
A 4px base grid expressed the Tailwind v4 way: one --spacing
multiplier rather than a list of fixed steps.
How it works:
--spacing: 4px, and every step is
calc(N × var(--spacing)) — so p-4 is 16px. In a Tailwind v4
project any integer works (p-7, p-13) because it is
computed, not looked up. The 11 --space-* variables below are the curated
set for plain-CSS consumers.
The scale
Token reference
| CSS variable | Value | Tailwind | Figma |
|---|---|---|---|
--spacing | 4px | base multiplier — drives all p-*/m-*/gap-*/w-* | — gap (Figma stores the 11 discrete steps instead) |
--space-1 | 4px | p-1 m-1 gap-1 w-1 | space/1 |
--space-2 | 8px | p-2 m-2 gap-2 w-2 | space/2 |
--space-3 | 12px | p-3 m-3 gap-3 w-3 | space/3 |
--space-4 | 16px | p-4 m-4 gap-4 w-4 | space/4 |
--space-5 | 20px | p-5 m-5 gap-5 w-5 | space/5 |
--space-6 | 24px | p-6 m-6 gap-6 w-6 | space/6 |
--space-8 | 32px | p-8 m-8 gap-8 w-8 | space/8 |
--space-10 | 40px | p-10 m-10 gap-10 w-10 | space/10 |
--space-12 | 48px | p-12 m-12 gap-12 w-12 | space/12 |
--space-16 | 64px | p-16 m-16 gap-16 w-16 | space/16 |
--space-20 | 80px | p-20 m-20 gap-20 w-20 | space/20 |
tokens/fig-tokens.css holds a fuller raw scale from the original Figma
export (27 entries including half-steps like --spacing-2-5). That layer is
unitless and intentionally off Tailwind's namespaces — treat the curated
--space-* set above as the one to build with.