Conversor de CSS para Tailwind

Tailwind CSS cria interfaces a partir de pequenas classes utilitárias reutilizáveis em vez de folhas de estilo manuscritas — p-4 em vez de padding: 16px;, flex items-center justify-between em vez de uma regra display: flex com mais três linhas abaixo. Se você está migrando uma folha de estilos existente para Tailwind, ou simplesmente tem um trecho CSS de uma ferramenta de design e deseja o equivalente Tailwind, digitar novamente cada declaração manualmente é tedioso e fácil errar. Esta ferramenta converte declarações CSS simples em suas classes utilitárias Tailwind mais próximas automaticamente.

Como funciona

Cole suas declarações CSS — pares property: value; simples ou um bloco de rule .selector { ... } completo (o seletor e chaves são removidos automaticamente) — e a ferramenta percorre cada declaração e a mapeia para uma classe Tailwind:

• Propriedades de palavra-chave direta (display, position, flex-direction, text-align, cursor, e dezenas mais) mapeiam diretamente para seu nome Tailwind, por exemplo, display: flex → flex, position: relative → relative.
• Propriedades de espaçamento (margin, padding, gap, width, height, top/right/bottom/left, e suas variantes por lado) são comparadas com a escala de espaçamento padrão do Tailwind — uma escala de etapa de um quarto de rem (4px) onde 16px é exatamente 4 unidades, então padding: 16px se torna p-4. Valores de atalho (margin: 0 auto, padding: 8px 16px) são expandidos para o menor conjunto de classes correspondentes (mx-auto, px-4 py-2, etc).
• Cores (color, background-color, border-color) são comparadas com a paleta padrão completa do Tailwind (slate, gray, zinc, red, orange, ... até stone, todos os tons 50–950). Uma correspondência hexadecimal exata se torna text-blue-500; qualquer outra coisa retorna para uma classe de valor arbitrário como text-[#123456].
• Tamanho de fonte, peso de fonte, altura de linha, espaçamento de letras, raio de borda, opacidade, z-index, sombra de caixa, transições e muito mais são comparados com suas respectivas escalas de Tailwind da mesma forma.
• Qualquer coisa sem um utilitário Tailwind direto (uma propriedade incomum, um valor fora de cada escala) é emitida como um comentário /* property: value - No direct Tailwind equivalent */ incorporado à lista de classes, então nada é perdido silenciosamente.

O resultado é uma única string de classes separadas por espaço (mais quaisquer comentários de fallback) na mesma ordem que suas declarações de entrada — pronto para colar em um atributo class/className.

Como usar

1. Cole suas declarações CSS, ou um bloco de rule completo, na caixa de entrada.
2. A lista de classes Tailwind é gerada automaticamente conforme você digita.
3. Copie o resultado ou baixe como um arquivo de texto.

FAQ

Isso cobre todas as propriedades CSS? Não — esta é uma conversão de melhor esforço cobrindo as propriedades que Tailwind tem utilitários diretos (layout, flexbox/grid, espaçamento, tipografia, cores, bordas, efeitos, transições). Propriedades sem equivalente Tailwind são deixadas como um comentário explicativo em vez de serem adivinhadas.

Por que minha cor se torna text-[#123456] em vez de uma classe nomeada? Apenas valores hexadecimais que correspondem exatamente a um dos tons da paleta padrão do Tailwind se resolvem para uma classe nomeada (text-blue-500, etc). Qualquer outro valor hexadecimal ou RGB usa a sintaxe de valor arbitrário do Tailwind, que é CSS válido em nome de classe e funciona pronto para uso sem alterações de configuração.

Isso leva em conta um tailwind.config.js personalizado? Não — as conversões são baseadas nas escalas de tema padrão do Tailwind. Se seu projeto personalizou a escala de espaçamento, cor ou tamanho de fonte, algumas classes sugeridas podem não corresponder à sua configuração; use o fallback de valor arbitrário para aquelas e ajuste com seus próprios tokens.

Meu CSS é enviado para algum lugar? Não — tudo é executado localmente no seu navegador (ou, quando chamado através da API, apenas no manipulador de solicitações). Nada é armazenado.