Conversor Tailwind CSS
Converta CSS puro em classes utilitárias Tailwind CSS e vice-versa. Suporta margin, padding, display, flex, grid, cores, tipografia, bordas e mais.
Entrada CSS
Saída Tailwind
Cole CSS à esquerda para gerar classes Tailwind
Conversor Tailwind CSS
Converta CSS puro em classes utilitárias Tailwind CSS e vice-versa. Suporta margin, padding, display, flex, grid, cores, tipografia, bordas e mais.
Recursos
- Converta propriedades CSS em classes utilitárias Tailwind CSS instantaneamente
- Modo reverso: converta classes Tailwind de volta para CSS puro
- Suporta mais de 50 propriedades CSS incluindo flex, grid, espaçamento, cores e tipografia
- Lida com valores arbitrários usando notação de colchetes do Tailwind
- Reconhece a escala de espaçamento padrão, paleta de cores e breakpoints do Tailwind
- Destaca propriedades não mapeadas para que você saiba o que precisa de conversão manual
Como usar
- Cole seu código CSS no painel esquerdo ou clique em Exemplo para CSS de amostra.
- Visualize as classes Tailwind geradas instantaneamente no painel direito.
- Clique em Trocar para mudar para o modo reverso e converter classes Tailwind de volta para CSS.
Perguntas Frequentes
Quais propriedades CSS são suportadas?
O conversor suporta mais de 50 propriedades CSS comuns incluindo display, position, layout flex/grid, margin, padding, width, height, font-size, font-weight, cores, border, border-radius, opacity, box-shadow, z-index, overflow, cursor e muitas mais. Propriedades não suportadas são listadas como comentários não mapeados.
Posso converter classes Tailwind de volta para CSS?
Sim. Clique no botão Trocar para mudar para o modo reverso. Insira classes utilitárias Tailwind separadas por espaços, e a ferramenta gerará as declarações CSS equivalentes envolvidas em um seletor .element.
Como as cores são mapeadas?
O conversor reconhece a paleta de cores padrão do Tailwind (slate, gray, red, blue, green, yellow, purple) em várias tonalidades (50-900). Valores hexadecimais como #3b82f6 são mapeados para blue-500. Cores não reconhecidas usam a sintaxe de valores arbitrários do Tailwind, ex. bg-[#custom].
Ele lida com propriedades CSS abreviadas?
Sim. Propriedades abreviadas como margin, padding e border são analisadas e convertidas para seus equivalentes Tailwind. Por exemplo, margin: 8px 16px se torna my-2 mx-4, e border: 1px solid #ccc se torna border border-solid border-[#ccc].
Meus dados CSS são enviados para um servidor?
Não. Toda a conversão acontece inteiramente no seu navegador usando JavaScript do lado do cliente. Seu código CSS nunca sai do seu dispositivo, tornando esta ferramenta completamente privada e segura para uso com código proprietário.
O que acontece com propriedades não suportadas?
Propriedades que não podem ser mapeadas para uma classe Tailwind padrão são listadas como comentários na saída. Isso permite ver exatamente quais propriedades precisam de tratamento manual ou configuração personalizada do Tailwind.
Suporta valores arbitrários do Tailwind?
Sim. Quando um valor CSS não corresponde à escala padrão do Tailwind, o conversor usa sintaxe de valores arbitrários como p-[13px] ou text-[22px]. No modo reverso, valores arbitrários como w-[200px] são corretamente analisados de volta para width: 200px.