Por que Tailwind

Tailwind é um framework utility-first: em vez de escrever uma classe CSS nova pra cada componente (.card, .btn-primary...), você compõe o visual direto no HTML/JSX usando classes utilitárias pequenas e de propósito único — flex, gap-4, rounded-lg, bg-blue-600.

CSS tradicional vs. utility-first

Veja o mesmo botão dos dois jeitos:

.btn-primary {
  background-color: #2563eb;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #1d4ed8;
}

<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold">
  Salvar
</button>

Repare que não existe mais um arquivo .css separado pra manter sincronizado com o componente — o estilo mora junto do elemento que ele estiliza. Isso parece estranho no começo (HTML "poluído" de classes), mas na prática elimina um problema real: CSS que cresce sem parar porque ninguém tem certeza se uma classe antiga ainda é usada em algum lugar.

Experimente

Edite as classes abaixo e veja o resultado mudar na hora — isso roda de verdade no seu navegador, sem servidor nenhum por trás.