Cole CSS e receba classes Tailwind v4 para cada seletor, ou cole classes e receba o CSS de volta. Hover, focus e breakpoints viram variantes, e tudo o que não pode ser convertido é listado.
Cole regras de CSS comuns e este conversor devolve uma lista de classes Tailwind v4 para cada seletor, usando classes nomeadas quando o tema padrão tem uma correspondência exata e valores arbitrários como w-[37px] quando não tem. Inverta a direção para transformar uma lista de classes de volta em CSS. Seletores e regras que não podem virar classes são listados, nunca descartados em silêncio.
Como as declarações comuns são convertidas (tema padrão do Tailwind v4)
Passar uma folha de estilo para Tailwind à mão significa procurar dezenas de nomes de classes e fazer de cabeça a conta de pixel para rem. Este conversor faz a busca e a conta, mostra quais classes são valores arbitrários que você talvez queira arredondar para a escala e diz com clareza quais regras precisam ficar em um arquivo CSS.
Tailwind v4 com o tema padrão. O espaçamento é calculado a partir do valor --spacing de 0.25rem, os nomes de raio seguem a escala da v4 (rounded-xs é 2px, rounded-sm 4px, rounded-md 6px e assim por diante) e os breakpoints usam os valores em rem da v4.
Uma classe nomeada só é usada quando dá exatamente o mesmo valor. As cores sempre viram valores arbitrários porque um código hex raramente corresponde exatamente a um tom da paleta, e os tamanhos de fonte continuam arbitrários porque os tamanhos de texto nomeados também definem uma altura de linha.
Seletores com descendentes, irmãos ou atributos, media queries que não são um único min-width, keyframes e outras at-rules, e custom properties. Eles aparecem na lista de não convertidos para você movê-los para o seu arquivo CSS.
As classes da tabela do conversor, os valores arbitrários e as propriedades arbitrárias voltam exatamente, com o espaçamento mostrado em valores rem que assumem o --spacing padrão. Nomes de cores do tema como bg-blue-500 e sombras predefinidas não estão na tabela e são listados como ignorados em vez de adivinhados.
Não, mas a sintaxe de propriedade arbitrária [property:value] cobre qualquer coisa para a qual o Tailwind não tenha um utilitário, como [mask-type:luminance]. Este conversor a usa para qualquer propriedade que não reconhece.
Uma regra de card com estado de hover e um breakpoint para tablet.
Cada declaração vira uma classe; as regras de hover e de breakpoint viram classes com prefixo no mesmo elemento.
Cole regras de CSS ou uma lista de classes Tailwind. Os valores arbitrários ficam destacados e tudo o que não pode ser convertido é listado abaixo do resultado.
Direção da conversão
CSS para Tailwind
Tailwind para CSS
Seu CSS
Suas classes Tailwind
Seletor para a saída em CSS
Resultado
Copiar tudo
Copiar classes
As classes destacadas são valores arbitrários: {n} de {t}.
Não convertido ({n})
Tudo foi convertido.
Nada para converter ainda.
o seletor precisa de uma classe em outro elemento ou de uma variante personalizada
a media query não tem um único breakpoint
at-rule mantida no CSS
custom property, mantenha no CSS ou em @theme
não está na tabela deste conversor
Comece grátis · Sem cartão de crédito