Construindo interfaces incríveis com Tailwind CSS

O Tailwind CSS acelera a construção de interfaces, mas o resultado só fica consistente quando existe um sistema por trás: cores, espaçamentos e tipografia bem definidos.

Comece pelos tokens

No Tailwind 4, os tokens ficam no próprio CSS com @theme. Assim, bg-sand-500 passa a existir em todo o projeto:

@theme {
  --color-sand-100: #f3ece6;
  --color-sand-500: #b08b6e;
}

Extraia componentes, não classes

Quando um conjunto de classes se repete, crie um componente (React, Vue...) em vez de esconder tudo em @apply. O componente carrega estrutura, acessibilidade e estilo juntos.

Pense em estados

Interfaces incríveis cuidam dos detalhes: hover, focus-visible, disabled e o tema escuro. Com as variantes do Tailwind, cada estado fica explícito ao lado do estilo base.