Gerador de configuração Tailwind
Monte um arquivo tailwind.config.js com suas cores de marca, fontes e espaçamentos personalizados, sem escrever o objeto JavaScript manualmente. Processamento 100% local — nada é enviado a um servidor.
Como funciona
Em vez de escrever manualmente o objeto de configuração do Tailwind CSS, informe suas cores de marca, suas famílias de fontes e seus espaçamentos adicionais nos formulários acima: a ferramenta monta em tempo real um arquivo tailwind.config.js válido com a seção theme.extend corretamente estruturada, pronto para substituir seu arquivo existente.
Por que usar theme.extend em vez de theme diretamente?
Colocar seus acréscimos em theme.extend permite manter todos os valores padrão do Tailwind (cores, tamanhos, espaçamentos padrão) enquanto adiciona seus próprios valores; redefinir diretamente theme substituiria totalmente os valores padrão, o que raramente é desejado.
O que significa a escolha do modo escuro "class" ou "media"?
Com class, o modo escuro é ativado adicionando a classe dark a um elemento pai (geralmente <html>), o que permite alternar manualmente via JavaScript; com media, o Tailwind segue automaticamente a preferência do sistema do usuário, sem controle manual possível.
O arquivo de configuração é gerado diretamente no seu navegador, sem envio de dados a um servidor.