Radius
Oito stops de border-radius do quase reto ao blob-style. O radius é uma decisão de marca tanto quanto de UI.
Border-radius é uma das decisões mais subestimadas em UI. Quanto
mais reto, mais institucional; quanto mais arredondado, mais
amigável. Um banco escolhe rounded-md. Um app de meditação
escolhe rounded-2xl. A tonalidade da marca está nessa escolha.
Como funciona
O Tailwind v4 declara oito stops, de xs (0.125rem / 2px) a 4xl
(2rem / 32px). Esses primitivos geram utilitários rounded-xs,
rounded-sm, ..., rounded-4xl automaticamente.
Nota importante: o token --radius (sem stop) que componentes
shadcn-derivados consomem não vive aqui. Ele é definido em
cada arquivo de tema — colors-default.css usa 0.625rem,
amber-minimal.css usa 0.375rem, e por aí vai. Cada tema
escolhe o radius que combina com sua personalidade.
Tokens
| Amostra | Token | Classe | Rem | Pixels | Uso |
|---|---|---|---|---|---|
| --radius-xs | rounded-xs | 0.125rem | 2px | Toque de suavização — quase reto | |
| --radius-sm | rounded-sm | 0.25rem | 4px | Inputs em tema austero, separadores | |
| --radius-md | rounded-md | 0.375rem | 6px | Default de inputs e botões pequenos | |
| --radius-lg | rounded-lg | 0.5rem | 8px | Cards, modais, painéis | |
| --radius-xl | rounded-xl | 0.75rem | 12px | Cards generosos, surfaces friendly | |
| --radius-2xl | rounded-2xl | 1rem | 16px | Cards arredondados, pegada moderna | |
| --radius-3xl | rounded-3xl | 1.5rem | 24px | Cards muito arredondados, pílulas grandes | |
| --radius-4xl | rounded-4xl | 2rem | 32px | Surfaces blob-style, ilustrações |
Boas práticas
- Decida cedo. Trocar o radius do sistema na metade do projeto é caro — quase tudo precisa ser re-revisitado.
- Mantenha hierarquia. Cards externos com radius maior, pills e badges com radius menor. Inputs e botões geralmente caem no mesmo stop (consistência de form).
rounded-fullexiste e é útil — mas cuidado com pílulas finas demais (radius proporcional ao height pode ficar estranho).- Não misture mais de 3 stops numa mesma tela. Mais que isso, o radius vira ruído visual em vez de hierarquia.
- Tema importa. Se o tema do produto usa
--radius: 0.5rem, pense duas vezes antes de hardcodarrounded-2xlnum componente — você está sobrepondo a personalidade do tema.