Problemas comuns e soluções

Classes utilitárias não aplicam estilo #

Possível causa: #

• Tailwind pode estar sendo removido pelo processo de purge (modo content mal configurado).

• O arquivo CSS gerado pode não estar sendo corretamente importado.

Solução: #

• Verifique se os caminhos nos campos content do tailwind.config.js estão corretos.

• Confirme se o arquivo CSS compilado está incluído corretamente no seu HTML ou framework.

Estilos funcionam em desenvolvimento, mas somem na build #

Possível causa: #

• Classes dinâmicas (ex: text-${cor}) não são capturadas pelo purge.

Solução: #

• Evite interpolar nomes de classes no HTML. Sempre que possível, use strings literais.

• Se necessário, inclua essas classes no campo safelist do tailwind.config.js.

O arquivo CSS está muito grande #

Possível causa: #

• Tailwind gera todas as combinações possíveis no modo de desenvolvimento.

Solução: #

• Para produção, use o comando de build que remove classes não utilizadas:

NODE_ENV=production npx tailwindcss -o build.css --minify

Algumas classes não têm efeito esperado #

Possível causa: #

• Conflito com regras CSS externas ou com a ordem de aplicação das classes.

• Faltou aplicar a variante correta (como hover:, md:, etc).

Solução: #

• Use a ferramenta de inspeção do navegador para ver quais estilos estão sendo aplicados ou sobrescritos.

• Teste a aplicação das classes isoladamente.

Variáveis personalizadas (como cores ou espaçamentos) não funcionam #

Possível causa: #

• A configuração personalizada pode não ter sido aplicada corretamente no tailwind.config.js.

Solução: #

• Certifique-se de que está extendendo o tema corretamente:

theme: {
  extend: {
    colors: {
      primario: '#1E40AF',
    },
  }
}

Esta página será atualizada conforme surgirem novas dúvidas da comunidade. Se você tem um problema que não está listado aqui, envie sua sugestão através dos comentários nas publicações do blog.