Limpeza de classes

Ao trabalhar com Tailwind CSS, o framework disponibiliza milhares de classes utilitárias para o desenvolvimento, muitas das quais você nunca vai usar no mesmo projeto. Para garantir que seu CSS final seja extremamente leve e eficiente, o Tailwind possui um motor de compilação automático que identifica e remove tudo o que não está sendo usado no seu HTML, templates ou componentes.

Esse processo de varredura é essencial para que qualquer projeto entregue alta performance em produção.

Por que fazer a limpeza?

Reduz drasticamente o tamanho do CSS final para poucos kilobytes.
Melhora o tempo de carregamento da página (FCP e LCP).
Evita o download e o parsing de estilos desnecessários pelo navegador.
Garante performance ideal e economia de dados em dispositivos móveis.

Como funciona a varredura de conteúdo

Nas versões anteriores do framework, a limpeza dependia de uma propriedade manual chamada content dentro do arquivo tailwind.config.js.

Na arquitetura atual, a propriedade content foi eliminada. O Tailwind agora adota um sistema de detecção automática de arquivos. O motor de compilação escaneia inteligentemente o diretório do seu projeto com base nas ferramentas de build integradas (como Vite, Next.js ou o próprio CLI do framework), descobrindo os arquivos de template e componentes sem que você precise mapeá-los manualmente.

Se você estiver utilizando o CLI do framework de forma isolada, ele detectará os arquivos do diretório atual de forma automática. Caso precise de um controle estrito ou queira incluir diretórios que estão fora da estrutura padrão do projeto, a configuração é feita diretamente na folha de estilo principal usando a diretiva @source:

CSS

@import "tailwindcss";

/* Opcional: Forçar a varredura em caminhos específicos fora do padrão */
@source "../pacotes-externos/**/*.js";

Comportamento em produção e desenvolvimento

Modo desenvolvimento: O compilador gera os estilos sob demanda de forma instantânea conforme você digita as classes no seu código.
Modo produção: O processo de build analisa estaticamente o código-fonte, remove qualquer estrutura redundante e otimiza o arquivo final.

A otimização e a minificação do arquivo final são controladas diretamente pelos sinalizadores (flags) do compilador ou pelo empacotador de módulos do seu projeto.

Exemplo de build otimizado via CLI:

Bash

npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Cuidado com classes dinâmicas

O motor do Tailwind analisa o código-fonte de forma estática, procurando por strings de texto completas. Por conta disso, concatenações ou interpolações de strings não são interpretadas.

Evite construir classes dessa forma:

JavaScript

// O Tailwind NÃO vai detectar esta classe
const btnColor = `bg-${cor}-500`;

HTML

<div class="text-{{ cor }}-700"></div>

Como o compilador busca pela palavra exata (ex: bg-red-500), strings parciais fazem com que o estilo seja removido por engano na hora do build.

Soluções:

Use classes completas em mapeamentos (Recomendado): Em vez de interpolar a string, mapeie o nome completo da classe que deseja aplicar:

JavaScript

const colorClasses = {
  danger: 'bg-red-500',
  success: 'bg-green-500',
  info: 'bg-blue-500'
};

const btnColor = colorClasses[status];

Use a diretiva @safelist no CSS: Se você realmente precisa garantir que determinadas classes nunca sejam removidas do build final (por exemplo, classes vindas de uma API ou banco de dados), utilize a diretiva @safelist diretamente no seu arquivo CSS principal:

CSS

@import "tailwindcss";

@safelist bg-red-500, bg-green-500, bg-blue-500;

Verificando o resultado

Você pode inspecionar a eficiência do build final utilizando ferramentas tradicionais de auditoria:

Lighthouse: Para medir o impacto do tamanho da folha de estilo na performance geral da página.
DevTools do Navegador: Verificando o tamanho real do arquivo .css carregado na aba Network (Rede).
Aba Coverage (Cobertura) no Chrome: Revela exatamente a porcentagem de CSS que foi baixada mas não foi executada na renderização da página atual.

A detecção automática e inteligente de conteúdo remove a complexidade de gerenciar arquivos de configuração, garantindo que o Tailwind entregue um CSS focado, leve e pronto para produção de forma nativa.