Como usar: Conversor CSS para Tailwind
- Cole regras CSS (com seletores) ou apenas declarações.
- Leia a lista de classes gerada para cada seletor.
- Copie as classes para o seu HTML ou JSX; revise os valores arbitrários e substitua-os por tokens do tema quando fizer sentido.
Como os valores são mapeados
A escala de espaçamento padrão do Tailwind usa passos de 0,25 rem (4 px), então padding: 16px vira p-4 e margin: 0 auto vira my-0 mx-auto. Valores que não estão na escala usam a sintaxe de valor arbitrário: padding: 13px → p-[13px]. Tipografia, raios e pesos são mapeados para os seus passos nomeados:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Limites que você precisa conhecer
- As cores viram valores arbitrários; depois, mapeie-as para a paleta do seu tema (por exemplo
bg-violet-500) — a ferramenta Variáveis CSS para Tailwind ajuda a definir um tema. - Propriedades sem utilitário são escritas como propriedades arbitrárias:
[mask-image:url(...)]. - Media queries, seletores complexos e animações precisam de tradução manual para
md:,group-hover:e configuração do tema. !importantvira o prefixo!.
Para valores pontuais, o gerador de valores arbitrários do Tailwind cria classes individuais, e o gerador de cores do Tailwind cria paletas completas.
Também pesquisado como: css para tailwind, converter css para tailwind, conversor tailwind, css para classes tailwind, gerador de css tailwind, migrar css para tailwind.
Ferramentas que combinam com: Conversor CSS para Tailwind
- Conversor PX para REM — Converta entre pixels, rem e em usando o tamanho de fonte raiz do seu projeto — ou cole uma folha de estilo inteira e converta todos os valores px de uma vez.
- Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
Perguntas frequentes
Suporta o Tailwind v4?
Sim. Os utilitários gerados e os valores arbitrários funcionam no Tailwind v3 e v4.
Por que as cores são escritas como bg-[#hex]?
As cores exatas são mantidas como valores arbitrários para que nada mude visualmente. Substitua-as pelas cores do seu tema quando tiver uma paleta.
Ele consegue converter media queries?
Não automaticamente. Converta as regras dentro de uma media query separadamente e adicione o prefixo responsivo correto, como
md:.Posso instalar o Conversor CSS para Tailwind como um aplicativo da web e usá-lo offline?
Sim. O Conversor CSS para Tailwind é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.