Padrões Tailwind CSS (v4 - 2025)

O que Padrões Tailwind CSS (v4 - 2025) faz?

CSS utilitário moderno com configuração nativa em CSS.

---

1. Arquitetura do Tailwind v4

O que mudou em relação ao v3

v3 (Legado)	v4 (Atual)
tailwind.config.js	Diretiva @theme baseada em CSS
Plugin PostCSS	Motor Oxide (10x mais rápido)
Modo JIT	Nativo, sempre ativo
Sistema de plugins	Recursos nativos em CSS
Diretiva @apply	Ainda funciona, mas desencorajada

Conceitos Centrais do v4

Conceito	Descrição
CSS-first	Configuração em CSS, não em JavaScript
Motor Oxide	Compilador baseado em Rust, muito mais rápido
Aninhamento Nativo	Aninhamento CSS sem PostCSS
Variáveis CSS	Todos os tokens expostos como variáveis --*

---

2. Configuração Baseada em CSS

Definição de Tema

@theme {
  /* Cores - use nomes semânticos */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* Escala de espaçamento */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Tipografia */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

Quando Estender vs. Sobrescrever

Ação	Use Quando
Estender	Adicionar novos valores junto com os padrões
Sobrescrever	Substituir a escala padrão completamente
Tokens semânticos	Nomenclatura específica do projeto (primary, surface)

---

3. Container Queries (Nativo no v4)

Breakpoint vs. Container

Tipo	Responde a
Breakpoint (md:)	Largura da viewport
Container (@container)	Largura do elemento pai

Uso de Container Queries

Padrão	Classes
Definir container	@container no pai
Breakpoint do container	@sm:, @md:, @lg: nos filhos
Containers nomeados	@container/card para especificidade

Quando Usar

Cenário	Use
Layouts no nível de página	Breakpoints da viewport
Responsivo no nível de componente	Container queries
Componentes reutilizáveis	Container queries (independentes de contexto)

---

4. Design Responsivo

Sistema de Breakpoints

Prefixo	Largura Mínima	Público-Alvo
(nenhum)	0px	Base mobile-first
sm:	640px	Telefone grande / tablet pequeno
md:	768px	Tablet
lg:	1024px	Laptop
xl:	1280px	Desktop
2xl:	1536px	Desktop grande

Princípio Mobile-First

1. Escreva estilos mobile primeiro (sem prefixo)
2. Adicione sobrescritas para telas maiores com prefixos
3. Exemplo: w-full md:w-1/2 lg:w-1/3

---

5. Modo Escuro

Estratégias de Configuração

Método	Comportamento	Use Quando
class	Alternância da classe .dark	Alternador manual de tema
media	Segue a preferência do sistema	Sem controle do usuário
selector	Seletor personalizado (v4)	Temas complexos

Padrão de Modo Escuro

Elemento	Claro	Escuro
Fundo	bg-white	dark:bg-zinc-900
Texto	text-zinc-900	dark:text-zinc-100
Bordas	border-zinc-200	dark:border-zinc-700

---

6. Padrões Modernos de Layout

Padrões Flexbox

Padrão	Classes
Centralizar (ambos os eixos)	flex items-center justify-center
Empilhamento vertical	flex flex-col gap-4
Linha horizontal	flex gap-4
Espaço entre	flex justify-between items-center
Grade com quebra	flex flex-wrap gap-4

Padrões Grid

Padrão	Classes
Auto-ajuste responsivo	grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]
Assimétrico (Bento)	grid grid-cols-3 grid-rows-2 com spans
Layout de barra lateral	grid grid-cols-[auto_1fr]

Nota: Prefira layouts assimétricos/Bento em vez de grades simétricas de 3 colunas.

---

7. Sistema Moderno de Cores

OKLCH vs. RGB/HSL

Formato	Vantagem
OKLCH	Perceptualmente uniforme, melhor para design
HSL	Matiz/saturação intuitivos
RGB	Compatibilidade legada

Arquitetura de Tokens de Cor

Camada	Exemplo	Propósito
Primitivo	--blue-500	Valores de cor brutos
Semântico	--color-primary	Nomenclatura baseada em propósito
Componente	--button-bg	Específico de componente

---

8. Sistema Tipográfico

Padrão de Pilha de Fontes

Tipo	Recomendado
Sans	'Inter', 'SF Pro', system-ui, sans-serif
Mono	'JetBrains Mono', 'Fira Code', monospace
Display	'Outfit', 'Poppins', sans-serif

Escala Tipográfica

Classe	Tamanho	Uso
text-xs	0.75rem	Rótulos, legendas
text-sm	0.875rem	Texto secundário
text-base	1rem	Corpo do texto
text-lg	1.125rem	Texto principal
text-xl+	1.25rem+	Títulos

---

9. Animação e Transições

Animações Embutidas

Classe	Efeito
animate-spin	Rotação contínua
animate-ping	Pulso de atenção
animate-pulse	Pulso sutil de opacidade
animate-bounce	Efeito de salto

Padrões de Transição

Padrão	Classes
Todas as propriedades	transition-all duration-200
Específica	transition-colors duration-150
Com easing	ease-out ou ease-in-out
Efeito hover	hover:scale-105 transition-transform

---

10. Extração de Componentes

Quando Extrair

Sinal	Ação
Mesma combinação de classes 3+ vezes	Extrair componente
Variantes de estado complexas	Extrair componente
Elemento do sistema de design	Extrair + documentar

Métodos de Extração

Método	Use Quando
Componente React/Vue	Dinâmico, precisa de JS
@apply no CSS	Estático, não precisa de JS
Tokens de design	Valores reutilizáveis

---

11. Anti-Padrões

Não Faça	Faça
Valores arbitrários em todo lugar	Use a escala do sistema de design
!important	Corrija a especificidade adequadamente
style= inline	Use utilitários
Duplicar longas listas de classes	Extraia o componente
Misturar configuração v3 com v4	Migre completamente para CSS-first
Usar @apply excessivamente	Prefira componentes

---

12. Princípios de Performance

Princípio	Implementação
Remover não usados	Automático no v4
Evitar dinamismo	Sem classes em string template
Usar Oxide	Padrão no v4, 10x mais rápido
Cache de builds	Cache em CI/CD

---

Lembre-se: Tailwind v4 é CSS-first. Abrace variáveis CSS, container queries e recursos nativos. O arquivo de configuração agora é opcional.