Espaçamento
Escala de espaçamento padrão do Tailwind 4 (`n * 0.25rem`). O design system usa 6 (24px), 8 (32px), 10 (40px), 12 (48px) e 16 (64px) como os passos principais em layout de componentes e páginas.
Escala visual
0
0px
p-01
4px
p-12
8px
p-23
12px
p-34
16px
p-46
24px
p-68
32px
p-810
40px
p-1012
48px
p-1216
64px
p-16Uso recomendado
| Contexto | Step | Valor | Classe |
|---|---|---|---|
| Padding de botão | 2–3 | 8–12px | px-2, px-3 |
| Gap de form fields | 3 | 12px | gap-3 |
| Padding de card | 6 | 24px | p-6 |
| Gap entre cards | 4 | 16px | gap-4 |
| Padding de página | 6–8 | 24–32px | p-6, p-8 |
| Separação de seções | 8–12 | 32–48px | gap-8 a gap-12 |
Demo: gap entre itens
gap-2
gap-4
gap-8