Tailwind CSS: Guia Completo do Zero ao Avançado
Domine Tailwind CSS de utility classes básicas a design systems profissionais. Responsive, dark mode, animações, shadcn/ui e patterns que empresas top usam em produção.
Por que isso é importante
Domine Tailwind CSS de utility classes básicas a design systems profissionais. Responsive, dark mode, animações, shadcn/ui e patterns que empresas top usam em produção.
O que é Tailwind CSS
Tailwind é um framework CSS utility-first. Em vez de escrever CSS customizado, você compõe estilos diretamente no HTML usando classes como flex, pt-4, text-center e bg-blue-500. Parece estranho no início, mas depois de 1 semana você nunca mais volta para CSS tradicional.
O diferencial: Tailwind gera apenas o CSS que você usa. O purge automático remove classes não utilizadas no build, resultando em arquivos CSS de 5-10KB em produção. Compare com Bootstrap (150KB+) ou CSS customizado que cresce infinitamente.
Setup com Next.js
Next.js já vem com Tailwind CSS configurado no create-next-app. Se está adicionando a um projeto existente, o setup leva 2 minutos.
npx create-next-app@latest --tailwind. Tailwind já vem configurado com PostCSS, purge e todas as otimizações.npm install tailwindcss @tailwindcss/postcss. Configure postcss.config.js e adicione as diretivas no CSS global.Classes Fundamentais
Layout
Flexbox e Grid com classes intuitivas. flex items-center justify-between substitui 5 linhas de CSS. grid grid-cols-3 gap-4 cria um grid de 3 colunas com espaçamento uniforme.
flex, flex-col, items-center, justify-between, gap-4. Cobre 90% dos layouts com 5 classes.grid, grid-cols-1 md:grid-cols-2 lg:grid-cols-3, gap-6. Grid responsivo em uma linha.p-4 = 16px, m-6 = 24px, gap-8 = 32px. Consistência automática.container mx-auto px-4 centraliza conteúdo com padding lateral. max-w-4xl limita largura para legibilidade.Tipografia
Sistema tipográfico completo. text-sm a text-6xl para tamanhos, font-bold para peso, leading-relaxed para line-height, tracking-wide para letter-spacing. Tudo responsivo com prefixos como md:text-3xl.
Cores
Paleta de cores pré-definida com 22 cores e 11 tons cada (50-950). Use text-gray-300 para texto, bg-blue-500 para backgrounds, border-lime-400 para bordas. Customize no tailwind.config.js para cores do seu brand.
Responsive Design
Tailwind usa mobile-first. Classes sem prefixo aplicam em todas as telas. Prefixos sm:, md:, lg:, xl: aplicam a partir daquele breakpoint.
Exemplo prático
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
Mobile: 1 coluna | Tablet: 2 colunas | Desktop: 3 colunas
Uma linha de código substitui 15 linhas de media queries CSS.
hidden md:block oculta em mobile, mostra em tablet+. md:hidden faz o inverso. Ideal para navegação responsiva.text-lg md:text-2xl lg:text-4xl escala tipografia por breakpoint. Texto legível em qualquer tela.Dark Mode
Dark mode nativo com o prefixo dark:. Configure darkMode: "class" no tailwind.config para controle via JavaScript, ou use darkMode: "media" para seguir a preferência do sistema.
Exemplo: bg-white dark:bg-gray-900 text-gray-900 dark:text-white. Cada classe light tem sua versão dark. O Tailwind gera apenas o CSS necessário para ambos os temas.
Dica de implementação
Use CSS variables para cores do design system. Defina --background, --foreground etc. no CSS e reference com bg-[var(--background)]. Quando troca o tema, muda apenas as variables. Esse é o pattern que shadcn/ui usa.
Animações e Transições
Tailwind inclui utilities para transições e animações sem CSS customizado.
hover:bg-blue-600 hover:scale-105 transition-all duration-300. Transições suaves em qualquer propriedade.animate-spin (loading), animate-pulse (skeleton), animate-bounce (atenção), animate-ping (notificação).group-hover:translate-x-2 group-hover:text-lime-400. O filho reage ao hover do pai. Ideal para cards com ícone de seta.animate-fadeIn. Para animações complexas, combine com Framer Motion.Tailwind + shadcn/ui
shadcn/ui é a biblioteca de componentes mais popular para Tailwind CSS. Componentes acessíveis, customizáveis e que você copia para seu projeto. Não é uma dependência npm, é código seu.
npx shadcn@latest init configura aliases, variáveis CSS e utilitários. Integra com Next.js automaticamente.npx shadcn@latest add button card dialog. Cada componente é um arquivo no seu projeto que você pode editar livremente.globals.css para mudar cores do tema inteiro. Edite componentes individuais para ajustar layout ou comportamento.Tailwind CSS vs Alternativas
Tailwind CSS
Utility-first framework
Prós
- Bundle mínimo (5-10KB gzip)
- Zero CSS customizado necessário
- Design system consistente built-in
- IntelliSense no VS Code
- Ecossistema rico (shadcn/ui, daisyUI)
Contras
- HTML mais verboso
- Curva de aprendizado das classes
- Difícil de compartilhar estilos sem componentes
CSS Modules / Styled
CSS-in-JS e CSS escopado
Prós
- CSS semântico tradicional
- Escopo automático por componente
- Familiar para devs CSS
Contras
- Bundle maior (CSS cresce indefinidamente)
- Sem design system built-in
- Context switching entre JSX e CSS
- CSS-in-JS tem overhead de runtime
Patterns de Produção
cn("base-classes", conditional && "extra") para classes condicionais. A função cn() do shadcn/ui combina clsx + tailwind-merge para resolver conflitos.<Button variant="primary"> é melhor que .btn-primary com @apply.theme.extend para adicionar sem sobrescrever defaults.