Quais propriedades CSS são reconhecidas?

Escalas de spacing para padding e margin, cores de texto e fundo, display, direção e alinhamento flex, tamanhos e pesos de fonte, border-radius, width e height, position e gap. O resto cai em classe arbitrária [prop:value].

E se o valor não estiver na escala padrão?

O conversor emite notação arbitrária como p-[13px] ou bg-[#3b82f6]. O JIT compila, e a classe segue Tailwind válido sem edição manual.

Funciona com variáveis CSS customizadas?

Sim. Valores var(--token) saem em colchetes; basta manter a variável declarada no theme do tailwind.config ou como custom property em :root.

A conversão é lossless?

Para padrões comuns, sim. Animações, gradientes e seletores exóticos saem como classes arbitrárias — sobrevivem à conversão, mas talvez você queira manter o CSS original deles.

Dá para round-trip com o tool Tailwind-to-CSS?

Na maior parte. Utilitários simples voltam exatamente iguais; valores arbitrários sobrevivem, mas declarações sem suporte ficam em forma arbitrária na volta.

Não. Toda a conversão roda nesta aba; o conteúdo da sua folha de estilos não sai da página.

CSS para Tailwind — mapeie declarações em utilitários

CSS → utilitárias Tailwind

Privado por design — roda inteiramente no seu navegador

Cole declarações CSS no lado esquerdo e copie as classes utilitárias Tailwind do lado direito. O conversor mapeia as escalas padrão de spacing, cor, tipografia e layout para os utilitários nativos, e cai em notação entre colchetes para qualquer valor que o Tailwind não conheça nativamente.

Propriedades mapeáveis

O conversor entende o conjunto de CSS do dia a dia: spacing de padding e margin, tamanhos e pesos de fonte, cor (text e bg), display, direção e alinhamento flex, border-radius, width e height, position e gap. Cada um vai para o atalho canônico do Tailwind — p-4, text-lg, justify-between — então o output lê exatamente como Tailwind escrito à mão.

Por que notação arbitrária importa

Códigos reais usam valores sem built-in: um font-size custom de 13px, uma cor de marca com hex específico, um gap de 1.7rem. Quando o conversor encontra esses casos, emite a forma arbitrária do Tailwind, tipo text-[13px] ou bg-[#3b82f6]. A classe continua válida, ainda usa JIT, e dá round-trip limpo via o Tailwind-to-CSS.

Quando esperar fallthrough

Seletores complexos, animações, gradientes e keyframes não são convertidos de propósito — eles vivem em camadas CSS que o Tailwind trata via plugins ou @apply, e uma heurística mentiria sobre correção. Essas declarações saem verbatim em classes arbitrárias [prop:value], então você as mantém para revisar sem perder dados.

Perguntas Frequentes

Quais propriedades CSS são reconhecidas?: Escalas de spacing para padding e margin, cores de texto e fundo, display, direção e alinhamento flex, tamanhos e pesos de fonte, border-radius, width e height, position e gap. O resto cai em classe arbitrária [prop:value].
E se o valor não estiver na escala padrão?: O conversor emite notação arbitrária como p-[13px] ou bg-[#3b82f6]. O JIT compila, e a classe segue Tailwind válido sem edição manual.
Funciona com variáveis CSS customizadas?: Sim. Valores var(--token) saem em colchetes; basta manter a variável declarada no theme do tailwind.config ou como custom property em :root.
A conversão é lossless?: Para padrões comuns, sim. Animações, gradientes e seletores exóticos saem como classes arbitrárias — sobrevivem à conversão, mas talvez você queira manter o CSS original deles.
Dá para round-trip com o tool Tailwind-to-CSS?: Na maior parte. Utilitários simples voltam exatamente iguais; valores arbitrários sobrevivem, mas declarações sem suporte ficam em forma arbitrária na volta.
Algo é enviado?: Não. Toda a conversão roda nesta aba; o conteúdo da sua folha de estilos não sai da página.