Conversor de CSS para Tailwind
Cole CSS antigo e receba um ponto de partida utility-first para migração, limpeza ou uma reescrita rápida em Tailwind.
A saída convertida vai aparecer aqui.
Por que usar um conversor de CSS para Tailwind?
Acelerar migração
Leve CSS legado para um fluxo Tailwind mais rápido, transformando declarações conhecidas em candidatas a utility classes em vez de traduzir cada linha manualmente.
Suporte a valores arbitrários
Preserve valores incomuns com a sintaxe arbitrária do Tailwind quando não existir uma utility padrão.
Refatorar pensando em revisão
Use a saída como rascunho de migração e depois simplifique valores repetidos em tokens, componentes, variants ou padrões reutilizáveis de classe.
Propriedades convertidas com frequência
Seletores complexos como :hover, ::before ou media queries ainda podem precisar de limpeza manual depois da conversão.
Perguntas frequentes
O conversor gera classes finais prontas para produção?
Não. Conversão automática funciona melhor como ponto de partida. Seletores complexos, regras responsivas, pseudo-elementos, comportamento de cascata e semântica de componentes ainda precisam de revisão humana.
Posso colar declarações soltas sem seletor?
Sim. A ferramenta envolve declarações independentes temporariamente para que o conversor consiga processá-las.
O que fazer com valores arbitrários repetidos?
Se um valor se repete pela UI, considere transformá-lo em token de tema, classe de componente ou primitivo do design system em vez de manter muitas utilities arbitrárias pontuais.
Isso converte media queries e estados hover?
Algumas declarações simples podem ser traduzidas, mas variants responsivas, estados hover, pseudo-elementos e seletores aninhados muitas vezes precisam de limpeza manual depois da conversão.