Espaçamento
Tokens dimensionais: container, form-height, margens, spacing e telas de referência. Escala de 4px sobre Tailwind v4.
Como usar
Use as classes utilitárias diretamente nos componentes.
Base
1 unidade = 4px. p-6 = 24px.
Breakpoints
sm=640, md=768, lg=1024, xl=1280, 2xl=1536.
Responsivo
Mobile-first. Adicione md: para sobrescrever em telas maiores.
container
Largura máxima de seções.
Variável Classe Desktop Mobile
default 1152 0
large 1280 0
form-height
Alturas canônicas de inputs e botões.
Variável Classe Desktop Mobile
extra small 24 16
small 40 40
default 48 48
large 56 64
margin / block
Espaçamento vertical entre seções.
Variável Classe Desktop Mobile
default 128 0
small 80 0
margin / inline
Margens horizontais de página.
Variável Classe Desktop Mobile
default 80 24
small 40 16
large 160 24
spacing
Escala genérica para padding, margin e gap. 1 unidade = 4px.
Variável Classe Desktop Mobile
00 0 0
05 2 2
1 4 4
2 8 8
3 12 12
4 16 16
5 20 20
6 24 24
8 32 32
10 40 40
12 48 48
14 56 56
16 64 64
20 80 80
24 96 96
32 128 128
40 160 160
48 192 192
screen
Telas de referência para layouts desktop e mobile. Não são breakpoints; os breakpoints reais seguem o padrão Tailwind.
Variável Desktop Mobile
width 1920px 390px
height 1080px 844px