ITpS

Estilos

Espaçamento

Tokens dimensionais — container, form-height, margens, spacing e screen. Escala 4pt sobre Tailwind v4.

Como usar

Escala 4pt sobre Tailwind v4. Use as classes utilitárias direto nos componentes. Para responsividade, aplique prefixos md: ou lg: quando o valor mobile diferir do desktop.

Base

1 unit = 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

Max-width de seções.

Variable Class Desktop Mobile
default 1152 0
large 1280 0

form-height

Alturas canônicas de inputs e botões.

Variable Class Desktop Mobile
extra small 24 16
small 40 40
default 48 48
large 56 64

margin / block

Espaçamento vertical entre seções.

Variable Class Desktop Mobile
default 128 0
small 80 0

margin / inline

Gutters horizontais de página.

Variable Class Desktop Mobile
default 80 24
small 40 16
large 160 24

spacing

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

Variable Class 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

Viewports de referência para layouts desktop e mobile. Não são breakpoints — apenas device targets. Breakpoints reais seguem Tailwind defaults.

Variable Desktop Mobile
width 1920px 390px
height 1080px 844px