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.

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.

Ferramenta para Desenvolvedores

Conversor de Tailwind para CSS

Converta classes CSS Tailwind para seus equivalentes em CSS vanilla. Cole suas classes e obtenha o CSS padrão com propriedades e valores corretos.

100% gratuito — nenhuma conta necessária

Classes Tailwind

classes convertidas: 7/7

Tailwind

flex

items-center

justify-between

p-4

rounded-lg

bg-white

shadow-md

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);

Tailwind → CSS Vanilla

Entenda o que suas classes Tailwind fazem

100+ Classes

Suporta espaçamento, dimensionamento, texto, flex, grid, display, borda e mais.

Padrões Dinâmicos

Lida com valores dinâmicos como p-4, m-2, w-1/2, text-xl com cálculo adequado.

Suporte a Prefixos

Reconhece prefixos responsivos (md:, lg:) e de estado (hover:, focus:).

Copiar CSS

Cópia com um clique da saída CSS vanilla gerada.

FAQ

Ferramentas para Desenvolvedores

Mais utilitários CSS

Gradiente CSS, box shadow, playground flexbox e muito mais.