# 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 `max-w-6xl` 1152 0

large `max-w-7xl` 1280 0

## form-height

Alturas canônicas de inputs e botões.

Variável Classe Desktop Mobile

extra small `h-6` 24 16

small `h-10` 40 40

default `h-12` 48 48

large `h-14` 56 64

## margin / block

Espaçamento vertical entre seções.

Variável Classe Desktop Mobile

default `my-32` 128 0

small `my-20` 80 0

## margin / inline

Margens horizontais de página.

Variável Classe Desktop Mobile

default `mx-20` 80 24

small `mx-10` 40 16

large `mx-40` 160 24

## spacing

Escala genérica para padding, margin e gap. 1 unidade = 4px.

Variável Classe Desktop Mobile

00 `p-0` 0 0

05 `p-0.5` 2 2

1 `p-1` 4 4

2 `p-2` 8 8

3 `p-3` 12 12

4 `p-4` 16 16

5 `p-5` 20 20

6 `p-6` 24 24

8 `p-8` 32 32

10 `p-10` 40 40

12 `p-12` 48 48

14 `p-14` 56 56

16 `p-16` 64 64

20 `p-20` 80 80

24 `p-24` 96 96

32 `p-32` 128 128

40 `p-40` 160 160

48 `p-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