O que é Tailwind CSS?
Tailwind CSS é um framework CSS moderno que adota a filosofia utility-first: em vez de componentes prontos (como Bootstrap), ele oferece centenas de classes utilitárias de baixo nível que você combina diretamente no HTML para construir qualquer design.
Criado por Adam Wathan, o Tailwind se tornou um dos frameworks CSS mais populares do mundo, amplamente adotado em projetos com React, Vue, Next.js, Laravel e outros.
Filosofia utility-first
A principal diferença do Tailwind para outros frameworks é que você não escreve CSS separado. Em vez disso, aplica classes como flex, pt-4, text-center e rotate-90 diretamente nos elementos HTML.
Com Tailwind, você nunca precisa sair do HTML para estilizar um elemento — tudo está disponível como classe utilitária.
Cores e espaçamento
Tailwind usa uma escala de cores com 11 tons (50 a 950) para cada cor base. O espaçamento segue uma escala de 4px: p-1 = 4px, p-2 = 8px, p-4 = 16px, etc.
- Fundo:
bg-blue-500,bg-red-100,bg-transparent - Texto:
text-gray-700,text-white,text-xl - Borda:
border,border-2,border-blue-400
Responsividade e breakpoints
O Tailwind usa prefixos de breakpoint mobile-first: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px). Combine com qualquer classe utilitária: hidden md:block.
Estados: hover, focus, active
Para estilizar estados, basta adicionar o prefixo antes da classe: hover:bg-blue-600, focus:ring-2, active:scale-95, disabled:opacity-50. Combine múltiplos estados livremente.
Boas práticas com Tailwind
Use o playground para prototipar rapidamente antes de adicionar ao código. Em produção, configure o Tailwind com PurgeCSS para remover classes não utilizadas e reduzir o tamanho do bundle. Para componentes reutilizáveis, utilize a diretiva @apply no CSS.