Limpeza de classes

Ao trabalhar com Tailwind CSS, é comum que o build inicial inclua milhares de classes utilitárias — muitas das quais você nunca vai usar. Para garantir que seu CSS final seja leve e eficiente, o Tailwind possui um sistema automático de purga de classes, que remove tudo o que não está sendo usado no seu HTML, templates ou componentes.

Esse processo é chamado de "content scanning" e é essencial para qualquer projeto em produção.

---

Por que fazer a limpeza?

• Reduz drasticamente o tamanho do CSS final

• Melhora o tempo de carregamento da página

• Evita carregar estilos desnecessários

• Garante performance ideal em dispositivos móveis

---

Como funciona a purga no Tailwind

O Tailwind faz a limpeza com base na configuração content do seu tailwind.config.js. Ele escaneia esses arquivos e mantém apenas as classes que realmente aparecem neles.

---

Exemplo de configuração:

Copymodule.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{vue,blade.php}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Essa configuração diz ao Tailwind onde procurar por classes usadas. Tudo que não aparecer nesses arquivos será removido automaticamente no build de produção.

---

Comportamento em diferentes ambientes

• Modo desenvolvimento: inclui todas as classes possíveis (para facilitar testes e protótipos).

• Modo produção: aplica a limpeza (purge) e gera o CSS otimizado.

Para garantir o comportamento correto, verifique se a variável NODE_ENV=production está definida no seu processo de build.

---

Build manual com purge ativado

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

---

Cuidado com classes dinâmicas

Se você estiver usando classes geradas dinamicamente, como:

Copyconst btnColor = `bg-${cor}-500`;

Ou:

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

Essas classes podem ser removidas por engano, porque o Tailwind não consegue detectá-las estaticamente.

Soluções:

1. Evite gerar classes dinamicamente quando possível.

2. Use safelisting (whitelist) no config:

CopyjsCopiarEditarmodule.exports = {
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
  ],
}

Ou use expressões com wildcards:

Copysafelist: [
  {
    pattern: /bg-(red|green|blue)-500/,
  }
]

---

Verificando o resultado

Você pode inspecionar o tamanho final do CSS ou usar ferramentas como:

• PurgeCSS Viewer

• Lighthouse (auditoria de performance)

• Ferramentas do navegador (aba “Network” > tamanho do .css)

---

A limpeza de classes é uma das razões pelas quais o Tailwind CSS é leve, rápido e adequado para produção — mesmo oferecendo milhares de utilitárias por padrão.