O que mudou no Tailwind 4
O Tailwind CSS 4 representa uma reescrita significativa do framework. A mudança mais visível é a eliminação do arquivo tailwind.config.js — toda a configuração agora acontece diretamente no CSS.
Configuração via CSS
Em vez de um arquivo JavaScript de configuração, você define tudo em styles.css:
@import "tailwindcss";
@theme {
--color-brand: oklch(60% 0.2 250);
--font-sans: 'Inter', system-ui, sans-serif;
--radius-card: 0.75rem;
}
As variáveis definidas em @theme ficam disponíveis tanto como classes utilitárias quanto como variáveis CSS nativas — var(--color-brand) funciona em qualquer lugar.
Cores com oklch
O Tailwind 4 adota o espaço de cores oklch por padrão. Isso oferece algumas vantagens:
- Perceptualmente uniforme — mudanças de lightness parecem consistentes
- Gamut amplo — cores mais vibrantes em displays modernos
- Mais intuitivo — lightness (L), chroma (C) e hue (H) são conceitos simples
/* oklch(lightness chroma hue) */
--color-primary: oklch(55% 0.22 262); /* azul */
--color-success: oklch(65% 0.18 145); /* verde */
--color-danger: oklch(60% 0.24 25); /* vermelho */
Variantes dinâmicas
O Tailwind 4 permite criar variantes personalizadas diretamente no CSS:
@variant hocus (&:hover, &:focus);
@variant dark-hover (.dark &:hover);
Isso elimina a necessidade de plugins para casos simples.
Performance
A engine do Tailwind 4 é substancialmente mais rápida:
- Builds incrementais quase instantâneos
- Menor output de CSS — apenas o que é usado
- Sem PostCSS obrigatório — funciona nativamente com Vite
Se você ainda está usando o Tailwind 3, vale a pena experimentar a versão 4 em um projeto novo. A curva de aprendizado é pequena e os ganhos são reais.