Conversor de Tailwind para CSS Gratuito
Converta classes CSS Tailwind para seus equivalentes em CSS vanilla. Cole suas classes e obtenha o CSS padrão com propriedades e valores corretos. Sem cadastro.
100% gratuito — nenhuma conta necessária
classes convertidas: 7/7
Tailwind
CSS
display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-radius: 0.5rem; /* bg-white: theme-dependent color */ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
Recursos de Conversor de Tailwind para CSS Gratuito
Entenda o que suas classes Tailwind fazem
Padrões Dinâmicos
Lida com valores dinâmicos como p-4, m-2, w-1/2, text-xl com cálculo adequado.
100+ Classes
Suporta espaçamento, dimensionamento, texto, flex, grid, display, borda e mais.
Copiar CSS
Cópia com um clique da saída CSS vanilla gerada.
Suporte a Prefixos
Reconhece prefixos responsivos (md:, lg:) e de estado (hover:, focus:).
FAQ
Isso cobre todas as classes Tailwind?
Cobre as classes utilitárias mais comuns (100+). Valores personalizados de tema e valores arbitrários complexos podem não converter perfeitamente.
E as classes de cor?
Classes de cor (text-blue-500, bg-red-200) são mostradas como comentários já que os valores reais dependem da configuração do seu tema Tailwind.
Posso colar uma string className completa?
Sim. Cole classes separadas por espaço como 'flex items-center p-4 text-sm font-bold' e cada uma será convertida para seu equivalente CSS.
Mais utilitários CSS
Gradiente CSS, box shadow, playground flexbox e muito mais.