Skip to main content
FreeToolkit .ai

Gerador de Configuração do Tailwind Gere arquivos de configuração do Tailwind CSS com cores personalizadas, fontes e pontos de quebra.

Gerador de Configuração do Tailwind illustration
🎨

Gerador de Configuração do Tailwind

Gere arquivos de configuração do Tailwind CSS com cores personalizadas, fontes e pontos de quebra.

1

Definir cores da marca

Escolha as cores primária e secundária para estender a paleta do Tailwind.

2

Configurar fontes e pontos de quebra

Defina famílias de fontes, raio de borda, estratégia de modo escuro e pontos de quebra da tela.

3

Copiar a configuração

Copie o arquivo tailwind.config.js completo e pronto para uso em seu projeto.

Loading tool...

What Is Gerador de Configuração do Tailwind?

O Gerador de Configuração do Tailwind cria arquivos personalizados tailwind.config.js para projetos do Tailwind CSS. A configuração do Tailwind controla como o framework gera classes de utilitário - desde cores e fontes até pontos de quebra e comportamento do modo escuro. Essa ferramenta permite definir as cores principais e secundárias da marca, especificar famílias de fontes para pilhas sans, serif e mono, escolher um raio de borda padrão, configurar a estratégia de modo escuro (classe ou mídia), definir caminhos de conteúdo para limpeza de classes e personalizar quebras responsivas. O arquivo de configuração gerado usa o formato oficial de configuração do Tailwind com a sintaxe module.exports adequada, pronto para substituir ou estender seu arquivo tailwind.config.js existente.

Why Use Gerador de Configuração do Tailwind?

  • Selecções de cores visuais para selecção de cores da marca
  • Pilhas de fontes, pontos de quebra e modo escuro configuráveis
  • Formato padrão de configuração do Tailwind com sintaxe correta
  • Pronto para copiar e usar em qualquer projeto Tailwind CSS

Common Use Cases

Configuração de Novo Projeto

Gere uma configuração inicial ao configurar novos projetos do Tailwind.

Personalização da Marca

Crie configurações personalizadas do Tailwind com cores e fontes específicas da marca.

Fundamento do Sistema de Design

Construa a base da configuração para um sistema de design construído no Tailwind.

Padronização em Equipe

Gere configurações consistentes para compartilhar entre projetos da equipe.

Technical Guide

O arquivo tailwind.config.js controla a geração de classes CSS do Tailwind. A matriz de conteúdo especifica quais arquivos escanear para nomes de classe (usados para remover CSS não utilizado). A opção darkMode pode ser classe (alternar com uma classe) ou mídia (seguir preferência do SO). O objeto theme.extend adiciona valores personalizados sem substituir os padrões. As cores definidas em extend estão disponíveis como bg-primary, text-secondary, etc. As famílias de fontes se tornam font-sans, font-serif, font-mono. Quebras de tela personalizadas substituem as quebras responsivas padrão. A chave DEFAULT do borderRadius define o valor da classe arredondada padrão. O Tailwind resolve a configuração na ordem: padrões, então valores de tema, então valores de theme.extend. Plug-ins podem ser adicionados à matriz de plug-ins para utilitários adicionais. Para projetos TypeScript, use a anotação @type para suporte ao IDE.

Tips & Best Practices

  • 1
    Use theme.extend para adicionar valores sem perder os padrões do Tailwind
  • 2
    Defina caminhos de conteúdo para incluir todos os arquivos que usam classes do Tailwind
  • 3
    Use estratégia de modo escuro por classe para controle explícito sobre o modo escuro
  • 4
    Corresponda pontos de quebra às especificações da grade do seu sistema de design

Related Tools

Ambiente de Testes do Tailwind CSS - free online tool

Ambiente de Testes do Tailwind CSS

Aplique classes de utilitário do Tailwind CSS a elementos com pré-visualização ao vivo e saída em HTML.

🎨 CSS & Design
Gerador de Escala Tipográfica - free online tool

Gerador de Escala Tipográfica

Gere uma escala tipográfica modular com tamanho base, razão e unidades personalizáveis.

🎨 CSS & Design
Gerador de Escala de Espaçamento - free online tool

Gerador de Escala de Espaçamento

Gere um sistema de escala de espaçamento consistente com unidade base personalizável e multiplicadores.

🎨 CSS & Design
Gerador de Variáveis CSS - free online tool

Gerador de Variáveis CSS

Gere propriedades personalizadas do CSS (variáveis) para cores, espaçamento e tipografia.

🎨 CSS & Design

Frequently Asked Questions

Q Isso substituirá minha configuração existente do Tailwind?
Substitua seu arquivo tailwind.config.js existente pelo arquivo gerado, ou mescline seções específicas.
Q Qual é a diferença entre o modo escuro por classe e mídia?
O modo de classe requer adicionar manualmente uma classe escura. O modo de mídia segue automaticamente a preferência do usuário pelo modo escuro do sistema operacional.
Q Preciso de todas as opções de configuração?
Não, o Tailwind tem padrões sensatos. Configure apenas o que você precisa personalizar.
Q Posso adicionar mais cores personalizadas?
Sim, adicione entradas de cor adicionais ao objeto colors em theme.extend.
Q Quais caminhos de conteúdo devo usar?
Inclua caminhos para todos os arquivos que contenham classes do Tailwind - normalmente ./src/**/*.{js,ts,jsx,tsx,html}.

About This Tool

Gerador de Configuração do Tailwind is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.