Espaçamento
Espaçamentos nomeados e a escala numérica do Figma.
A escala numérica do Tailwind (--spacing: 0.25rem) é a mesma do Figma, em
passos de 4 px. Os nomes semânticos ficam por cima.
| Nome | Valor | Tailwind | |
|---|---|---|---|
stack-s gap-stack-s: tight stacks (label+hint) | 0.5rem | gap-stack-s | |
stack-m gap-stack-m: default stack | 1rem | gap-stack-m | |
stack-l gap-stack-l: groups within a section | 1.5rem | gap-stack-l | |
section gap-section: between page sections (phone: spacing/12 = 48) | 4rem | gap-section | |
gutter px-gutter: phone side gutter | 1rem | gap-gutter |
| Passo Figma | px | CSS | |
|---|---|---|---|
| spacing/0 | 0 | 0 | |
| spacing/0-5 | 2 | calc(var(--spacing) * 0.5) | |
| spacing/1 | 4 | calc(var(--spacing) * 1) | |
| spacing/1-5 | 6 | calc(var(--spacing) * 1.5) | |
| spacing/2 | 8 | calc(var(--spacing) * 2) | |
| spacing/2-5 | 10 | calc(var(--spacing) * 2.5) | |
| spacing/3 | 12 | calc(var(--spacing) * 3) | |
| spacing/3-5 | 14 | calc(var(--spacing) * 3.5) | |
| spacing/4 | 16 | calc(var(--spacing) * 4) | |
| spacing/5 | 20 | calc(var(--spacing) * 5) | |
| spacing/6 | 24 | calc(var(--spacing) * 6) | |
| spacing/7 | 28 | calc(var(--spacing) * 7) | |
| spacing/8 | 32 | calc(var(--spacing) * 8) | |
| spacing/9 | 36 | calc(var(--spacing) * 9) | |
| spacing/10 | 40 | calc(var(--spacing) * 10) | |
| spacing/11 | 44 | calc(var(--spacing) * 11) | |
| spacing/12 | 48 | calc(var(--spacing) * 12) | |
| spacing/13 | 52 | calc(var(--spacing) * 13) | |
| spacing/14 | 56 | calc(var(--spacing) * 14) | |
| spacing/16 | 64 | calc(var(--spacing) * 16) | |
| spacing/18 | 72 | calc(var(--spacing) * 18) | |
| spacing/20 | 80 | calc(var(--spacing) * 20) | |
| spacing/24 | 96 | calc(var(--spacing) * 24) | |
| spacing/stack-s | NaN | var(--spacing-stack-s) | |
| spacing/stack-m | NaN | var(--spacing-stack-m) | |
| spacing/stack-l | NaN | var(--spacing-stack-l) | |
| spacing/section | NaN | var(--spacing-section) | |
| spacing/gutter | NaN | var(--spacing-gutter) |