Utilitários comuns Tailwind para spacing, cor, tipografia, flex e position, mais qualquer forma arbitrária [value] ou [prop:value]. Variantes ainda não são suportadas.

Por que pedir seletor?

A saída é uma única regra CSS. Escolhendo o seletor você cola direto numa folha sem renomear nem reembrulhar.

Variantes responsivas e hover são suportadas?

Ainda não — exigem wrapper de media query ou pseudoclasse. Remova prefixos md:, hover: e dark: antes de colar; utilitários base fazem round-trip limpo.

O conversor conhece o meu theme?

Não. Usa a escala padrão. Spacing ou cores customizadas caem em declarações arbitrárias no output, mas ainda assim você entrega um CSS funcional.

Posso passar o CSS pelo conversor inverso?

Sim — para utilitários simples o round-trip é exato. Valores arbitrários sobrevivem; declarações sem suporte continuam como classes arbitrárias.

Meu input é enviado para algum lugar?

Não. Toda a conversão roda nesta aba; o Toova não vê suas classes, seu seletor nem o output.

Tailwind para CSS — utilitários em uma regra

Utilitários Tailwind → CSS

Privado por design — roda inteiramente no seu navegador

Cole uma lista de utilitários Tailwind e um seletor, e o Toova monta a regra CSS correspondente. Classes arbitrárias como p-[13px] ou [grid-template-columns:1fr_2fr] saem como declarações cruas, prontas para jogar direto numa folha de estilos.

Quando o caminho inverso ajuda

Às vezes você protótipa com Tailwind, mas precisa entregar CSS — um e-mail de marketing, um widget de terceiros, um hand-off para um CMS que não carrega Tailwind. O conversor junta a lista de utilitários numa única regra, com o seletor que você escolher, e você cola direto sem renomear nem limpar o markup de playground.

Como os valores arbitrários voltam

As classes arbitrárias do Tailwind carregam o valor inline: p-[13px] vira padding: 13px e [grid-template-columns:1fr_2fr] vira grid-template-columns: 1fr 2fr. O conversor desempacota os dois formatos literalmente, então qualquer valor que você codificou via JIT sobrevive sem mapeamento extra.

Limites e round-trip

Variantes responsivas (md:flex), de estado (hover:bg-black) e modo escuro (dark:text-white) precisam de media query ou pseudoclasse, então o conversor ainda não emite — tire essas antes de colar. Tokens de tema (text-brand) caem na escala padrão; se você customizou theme, fallback arbitrário. Utilitários simples voltam limpos pelo tool CSS-to-Tailwind.

Perguntas Frequentes

O que é convertido?: Utilitários comuns Tailwind para spacing, cor, tipografia, flex e position, mais qualquer forma arbitrária [value] ou [prop:value]. Variantes ainda não são suportadas.
Por que pedir seletor?: A saída é uma única regra CSS. Escolhendo o seletor você cola direto numa folha sem renomear nem reembrulhar.
Variantes responsivas e hover são suportadas?: Ainda não — exigem wrapper de media query ou pseudoclasse. Remova prefixos md:, hover: e dark: antes de colar; utilitários base fazem round-trip limpo.
O conversor conhece o meu theme?: Não. Usa a escala padrão. Spacing ou cores customizadas caem em declarações arbitrárias no output, mas ainda assim você entrega um CSS funcional.
Posso passar o CSS pelo conversor inverso?: Sim — para utilitários simples o round-trip é exato. Valores arbitrários sobrevivem; declarações sem suporte continuam como classes arbitrárias.
Meu input é enviado para algum lugar?: Não. Toda a conversão roda nesta aba; o Toova não vê suas classes, seu seletor nem o output.