Fundamentos
Forma e espaço
O raio base é --radius (10px); a escala deriva dele, então ajustar o token muda todos os cantos. Espaçamento usa a escala padrão do Tailwind, em múltiplos de 4px.
Raio
rounded-sm
6px · Detalhes pequenos
rounded-md
8px · Controles: botão, input, badge
rounded-lg
10px · Popovers, menus
rounded-xl
14px · Cards e painéis
rounded-2xl
18px · Blocos de destaque em sites
rounded-full
— · Avatares e pílulas
Sombra
shadow-xsControles
shadow-smCards
shadow-mdElementos flutuantes
shadow-lgOverlays: dialog, sheet, popover
Espaçamento
gap-1 · 4pxÍcone e texto
gap-2 · 8pxItens de um grupo (botões, badges)
space-y-2 · 8pxLabel e campo
gap-4 · 16pxCards em grade
gap-6 · 24pxCampos de um formulário; padding interno de cards
space-y-12 · 48pxSeções de uma página