Pular para o conteúdo
Numio

Converter CSS em classes Tailwind CSS — Numio

Converta declarações CSS em classes utilitárias do Tailwind CSS, exibidas como regras @apply para cada seletor. Use para encontrar as utilities correspondentes ao migrar estilos existentes. O conversor tem como alvo o Tailwind CSS v3.

Encontrar as utilities do Tailwind que correspondem a regras CSS existentes durante uma migração.

CSS

TailwindCSS 3.x

Quando usar

  • Encontrar as utilities do Tailwind que correspondem a regras CSS existentes durante uma migração.
  • Aprender nomes de classe do Tailwind convertendo CSS que você já conhece.

Como usar

  1. Cole regras CSS.
  2. Ajuste o valor base de rem ou a configuração do Tailwind se o seu projeto usa configurações personalizadas.
  3. Copie as classes depois de @apply para o seu markup ou folha de estilos e confira o resultado no seu projeto Tailwind.

Entrada CSS

.card { display: flex; padding: 1rem; }

Saída Tailwind (escala padrão)

.card {
  @apply flex p-4;
}

Detalhes e limitações

Nomes de classe e escalas seguem o Tailwind CSS v3. A compatibilidade com a configuração e a sintaxe do Tailwind CSS v4 não é garantida.

Valores personalizados, seletores complexos e pseudoelementos podem não ser convertidos. Não há garantia de que o resultado fique idêntico, então confira na página real.

O campo de configuração personalizada é avaliado como JavaScript no seu navegador. Não cole configurações em que você não confia.

FAQ

Suporta o Tailwind CSS v4?

Usa os nomes de classe e as escalas do Tailwind CSS v3. Muitas utilities, como flex, p-4 e text-sm, mantêm o nome na v4, mas a v4 move a configuração para o CSS e renomeia algumas utilities, então confira a saída no seu projeto v4.

Como uso nomes de classe em vez de @apply?

Copie a lista depois de @apply para o atributo class do elemento, por exemplo class="flex p-4". A forma @apply agrupa as classes pelo seletor original.

Dá para converter classes do Bootstrap para Tailwind?

Não. Ele converte declarações CSS, não nomes de classe de outro framework. Cole as regras CSS por trás de um componente do Bootstrap para ver as utilities correspondentes.

Por que algumas declarações não são convertidas?

Valores fora da escala do Tailwind, seletores complexos e pseudoelementos podem não ter uma utility direta. Mantenha-os como CSS ou adicione-os à sua configuração do Tailwind.