Tailwind sem bagunça: estados hover, focus, active e disabled do jeito certo

O Tailwind deixa fácil estilizar o estado normal de um componente. Os outros estados — hover, foco, pressionado, desabilitado, carregando, erro — são esquecidos com frequência. E são eles que fazem a interface parecer viva e confiável.

Todo elemento interativo tem pelo menos seis estados

1. 1.Normal
2. 2.Hover (no desktop)
3. 3.Focus-visible (navegação por teclado)
4. 4.Active (no momento do clique ou toque)
5. 5.Disabled
6. 6.Loading ou erro, quando aplicável

Um botão completo

<button className="h-12 rounded-full bg-neon px-6 font-medium text-ink
  transition-all duration-300
  hover:bg-neon-soft
  focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon
  active:scale-[0.97]
  disabled:pointer-events-none disabled:opacity-40">
  Enviar
</button>

Organize para não repetir

Estados não devem ser copiados em cada tela. Centralize em componentes (Button, Input) ou variantes — o caminho de Componentes reutilizáveis no React: como evitar o "Button2Final" e de um design system (Design System na prática: como padronizar a UX/UI de produtos digitais ao nível Apple/Stripe).

Detalhes que fazem diferença

• Use `focus-visible`, não `focus`: o anel aparece para quem navega por teclado, não para quem clica (Navegação por teclado e focus-visible: o detalhe que separa sites amadores).
• Hover só onde existe mouse: no celular, ele "gruda" após o toque.
• Transições curtas e consistentes (Micro-interações que convertem: como transições de 200ms a 300ms impactam a retenção do usuário).
• Estado de erro acessível, com cor e texto, nunca só cor.
• Tema escuro para cada estado.

Interfaces completas são padrão nos sites e sistemas da We Codex. Fale com a gente.