CSS para Tailwind
Converta código CSS para classes Tailwind CSS. Cole seu CSS e obtenha classes Tailwind instantaneamente.
⚠️ Propriedades não suportadas ()
ℹ️ Sobre CSS para Tailwind
Cole um conjunto de regras CSS e este conversor devolve as classes utilitárias equivalentes do Tailwind, agrupadas por seletor. Ele mapeia as declarações para as escalas padrão do Tailwind — espaçamento, de text-xs a text-9xl, rounded-lg, gray-700 e o restante — e recorre a valores arbitrários como p-[13px] quando nada corresponde, listando as declarações que não conseguiu converter. Útil na migração de uma folha de estilo antiga ou de um componente legado para o Tailwind. A análise acontece no seu navegador; o CSS nunca é enviado.
💡 Casos de uso
📋 Como usar
Cole uma regra CSS ou um bloco inteiro de declarações na caixa CSS à esquerda, ou clique em Exemplo para carregar uma amostra.
Acompanhe o painel Tailwind CSS à direita se preencher enquanto você digita, mapeando cada propriedade e valor para a classe utilitária correspondente.
Confira a saída seletor por seletor: cada regra aparece como um comentário de cabeçalho seguido da lista de classes que você pode colar em um atributo class.
Abra a caixa amarela Propriedades sem suporte para ver as declarações que não têm equivalente no Tailwind, listadas junto do seletor, e tratá-las manualmente.
Clique em Copiar para levar as classes geradas para a área de transferência.
Clique em Limpar para esvaziar os dois painéis antes de colar o próximo bloco de CSS.
💎 Dicas Pro
- Cole o seu conteúdo direto — o Conversor de CSS para Tailwind identifica os padrões de entrada mais comuns e aplica os ajustes adequados automaticamente.
- Use os atalhos de teclado (Ctrl/Cmd+A para selecionar tudo, Ctrl/Cmd+C para copiar) e agilize o seu trabalho dentro do Conversor de CSS para Tailwind.
- Para entradas muito grandes, divida o conteúdo em partes — a maioria das abas do navegador aguenta megabytes de texto, mas processar payloads enormes pode travar a interface por alguns instantes.
- O Conversor de CSS para Tailwind não registra nem armazena a sua entrada. Se você precisa de histórico, copie os resultados importantes para um arquivo local ou um app de notas.
- Combine o Conversor de CSS para Tailwind com as outras ferramentas do site (formatadores, conversores, codificadores) e monte pipelines de dados completos sem sair do navegador.
❓ Perguntas frequentes
Sim, totalmente gratuito, sem cadastro, sem chave de API, sem marca d'água e sem limites de uso.
Não. O Conversor de CSS para Tailwind roda inteiramente no seu navegador, do lado do cliente. A sua entrada nunca passa pelos nossos servidores.
Não existe um limite rígido, mas espere alguma lentidão em entradas maiores que alguns megabytes, dependendo da memória do seu dispositivo.
Sim. Os resultados gerados com o Conversor de CSS para Tailwind são seus para usar livremente em qualquer projeto pessoal ou comercial.
A maior parte da lógica roda em JavaScript no lado do cliente, então, depois do carregamento inicial, na maioria das vezes você consegue continuar trabalhando sem conexão de rede.
Nenhum. Como o Conversor de CSS para Tailwind roda no seu navegador, você pode processar quantas entradas o seu hardware aguentar, sem chaves de API nem limitações.