Tailwind CSS v4: builds 5x mais rápidos, incremental 100x, zero config

Resposta atômica: Tailwind CSS v4 entregou full build até 5x mais rápido, incremental 100x mais rápido (medido em microssegundos), zero config (template files descobertos automaticamente), e construído sobre CSS features modernas (cascade layers, @property, color-mix()). Versão mais recente é v4.3.

A virada conceitual: Tailwind virou CSS-first

V3 era JavaScript-first. Configuração em tailwind.config.js, processamento em PostCSS, geração de classes do toolkit JS.

V4 inverte: a configuração mora em CSS. As features novas são CSS nativo. O toolkit empurra menos camada — usa o que o navegador já entende.

A consequência prática: menos JavaScript no pipeline, mais browser fazendo trabalho otimizado.

Os números que importam

• Full build até 5x mais rápido
• Incremental 100x mais rápido, medido em microssegundos

Para apps grandes, incremental 100x mais rápido significa que cada save em dev recompila em microssegundos em vez de centenas de ms. Hot reload deixa de ser gargalo de DX.

Em CI, full build mais rápido reduz tempo de pipeline.

Zero config

V3: configurar content: ["./src/**/*.{ts,tsx}"] em tailwind.config.js. Esquecer = utilities não geradas.

V4: detecção automática. Tailwind escaneia o projeto e gera o necessário. Sem content, sem pastas para listar.

Para greenfield, elimina classe inteira de bugs. Para projetos com estrutura única (monorepo), customização ainda funciona.

CSS modernas embutidas

Cascade layers:

@layer base, components, utilities;

@layer components {
  .card { /* ... */ }
}

Especificidade controlada por ordem das layers, não por quantidade de seletores. Resolve a guerra de !important.

@property:

@property --glow {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(38 92% 55%);
}

Variáveis CSS tipadas, animáveis. Permite animar valores que antes não animavam.

color-mix():

.button {
  background: color-mix(in oklch, var(--mel), white 20%);
}

Mistura de cores nativa, sem precisar calcular variantes em build time. Para design systems com tints dinâmicos, é a peça que faltava.

Vite plugin first-party

V4 publica @tailwindcss/vite oficial:

import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [tailwindcss()],
};

Para apps Next.js, @tailwindcss/postcss continua sendo o caminho.

Novidades em v4.1 e v4.3

• v4.1: text shadows nativo, masks, mais utilities/variants
• v4.3: scrollbar styling first-party, novas cores, logical property utilities, zoom, tab-size

not-* variant é útil:

<button class="bg-mel not-hover:bg-mel-fundo">click</button>

Resolve casos onde antes era preciso CSS custom para "estilo padrão exceto quando X".

Migração de v3 para v4

Não é trivial em projeto maduro:

1. Config muda de JS para CSS:

   @import "tailwindcss";
   
   @theme {
     --color-mel: oklch(0.65 0.18 51);
     --font-display: var(--font-geist-sans);
   }
   

2. Alguns utilities renomeados — codemod oficial cobre a maioria
3. Plugins — alguns plugins v3 precisam atualização
4. Build pipeline — testar CI com v4 antes de promover

Para projeto pequeno, migration roda em meio dia. Para projeto grande, plan para sprint.

Quando esperar

• Projeto em produção estável, sem dor com v3 → não há urgência
• Stack com PostCSS plugins customizados → validar compatibilidade
• Equipe sem capacidade para revisão de regressão visual → adiar

Quando migrar agora

• Projeto novo, qualquer caso → use v4 desde o início
• Dev experience com v3 está lenta → ganho de incremental 100x compensa
• Você usa CSS modern features manualmente → v4 já integra
• Está em Vite → Vite plugin first-party é ganho imediato

A leitura estratégica

V4 cimenta Tailwind como abstração que fica do lado do CSS, não do lado do JavaScript. Para 2026 e diante, esse posicionamento envelhece melhor — browsers vão continuar ganhando features (container queries, :has(), view transitions). V4 absorve isso naturalmente.

Próximo passo

Para times pesando migration ou greenfield: discovery técnico avalia custo vs ganho no seu workload + roadmap.

Fontes citadas

1. Tailwind CSS v4.0 — Tailwind Blog · acessado em 2026-05-19
2. Tailwind CSS v4.3 — Scrollbars, new colors · acessado em 2026-05-19
3. Tailwind CSS v4.1 — Text shadows, masks · acessado em 2026-05-19