CSS → Tailwind

Converta CSS para classes Tailwind aproximadas. Cores, espaçamento, fontes. Nível de confiança por correspondência.

Entrada CSS

Saída Tailwind

As classes convertidas aparecem aqui

High = exact matchMedium = close approximationLow = arbitrary value

Approximate conversion. Review output for complex properties like shadows and transforms.

Como converter CSS para classes Tailwind

Traduza CSS puro em classes utilitárias do Tailwind com índices de confiança usando o conversor gratuito de CSS para Tailwind do The IT Hustle.

1
Cole seu CSSSolte as declarações que você quer converter — ou clique em Carregar Exemplo para ver o conversor em ação.
2
Execute a conversãoClique em Converter para mapear cada par propriedade-valor para sua classe utilitária Tailwind mais próxima.
3
Confira os selos de confiançaCada classe é classificada como Alta (equivalente exato do Tailwind), Média (aproximação próxima) ou Baixa (fallback de valor arbitrário), para você saber o que verificar novamente.
4
Revise a tabela de mapeamentoA tabela detalhada mostra cada propriedade CSS, seu valor, a classe Tailwind resultante e a confiança — linha por linha.
5
Copie as classesClique em Copiar Tudo e cole a lista de classes no atributo class do seu componente.

Perguntas frequentes

Alta significa uma correspondência exata com uma utilidade padrão do Tailwind (padding: 16px → p-4). Média significa que o valor de escala mais próximo foi escolhido e pode diferir levemente do original. Baixa significa que não havia equivalente limpo, então um valor arbitrário como p-[42px] foi gerado.

A sintaxe de valor arbitrário do Tailwind — ela gera uma utilidade única para valores fora da escala de design. Elas funcionam bem, mas considere ajustar o valor para um degrau da escala (p-10 em vez de p-[42px]) para manter a consistência com o resto do seu código.

Correspondências exatas com a paleta do Tailwind são mapeadas diretamente (como #ef4444 → red-500); outras cores são comparadas à cor mais próxima da paleta por distância RGB, sinalizadas com confiança menor, para você decidir se a aproximação é aceitável.

O conjunto comum de layout e estilo: margens, padding, dimensionamento, display, posição, alinhamento flexbox, tamanho e peso de fonte, cores, alinhamento de texto, border-radius, overflow, opacidade e cursor. Seletores complexos, media queries e animações estão fora do escopo — converta-os manualmente.

Ferramentas relacionadas

Conversor de Unidades CSS Minificador de CSS Playground de Flexbox