Anúncios incomodam? Ir Sem anúncios Hoje 

Conversor de Classes do Tailwind CSS para CSS Puro

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Conversor de Classes de Tailwind para CSS Puro

Conversor de Classes do Tailwind CSS para CSS Puro

Cole uma string de classes de utilidade do Tailwind v3 e obtenha imediatamente a regra de CSS correspondente. Cada classe do Tailwind é expandida para sua declaração CSS exata com os valores corretos de rem, px e cores a partir dos tokens de design oficiais — sem suposições, sem arredondamento.

Útil ao migrar um componente do Tailwind para CSS puro, quando deseja inspecionar as declarações subjacentes ou quando precisa entregar CSS manualmente sem a etapa de build do Tailwind.

Como usar

Cole sua string de classe do Tailwind no campo de entrada (por exemplo: flex items-center gap-4 p-6 bg-blue-500).
Opcionalmente, altere o seletor — o padrão é .element.
Leia o CSS gerado no painel de saída. As variações responsivas (md:, lg:…) são envolvidas em @media consultas; as variações de estado (hover:, focus:…) geram seus próprios seletores.
Copie o resultado ou baixe como um .css arquivo.

Características

Escala completa de espaçamento – Todos os valores de margem, padding, gap, largura e altura do Tailwind são resolvidos para a saída canônica em rem ou px.
Paleta completa de cores – Todas as 22 famílias de cores com tons de 50 a 950 são mapeadas para seus códigos hex exatos para texto, fundo, borda, preenchimento e traço.
Variações responsivas – sm:, md:, lg:, xl:e, e 2xl: são emitidas como blocos corretos. @media (min-width: ...) .
Variações de estado – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: e mais tornam-se seletores reais de CSS ou consultas de mídia.
Valores arbitrários – A sintaxe de colchetes, como w-[37rem] ou bg-[#abc123] , é passada diretamente para a declaração correspondente.
Utilidades negativas – Formas com traço inicial, como -mt-4 , produzem os valores negativos corretos em rem.
Seletor personalizado – Escolha qualquer seletor para envolver a regra de saída (.card, #hero, etc.).
Copiar e baixar – Um clique para copiar o CSS ou salvá-lo como um arquivo.

ANUNCIADO Remover?

 Perguntas frequentes

Qual a diferença entre CSS de utilidade e CSS baseado em componentes?

O CSS de utilidade fornece classes de propósito único (por exemplo, flex, p-4, text-center) que correspondem a uma única declaração CSS, de modo que o estilo seja aplicado diretamente no markup. O CSS baseado em componentes agrupa muitas declarações sob nomes semânticos (por exemplo, .card, .button) que descrevem o elemento em vez de suas aparências. O CSS de utilidade troca um HTML maior por átomos previsíveis e reutilizáveis; o CSS baseado em componentes troca arquivos CSS maiores por abstrações de nível superior.
Como a escala de espaçamento do Tailwind se relaciona com as unidades rem?

A escala de espaçamento padrão do Tailwind é um multiplicador sobre uma base de 0,25rem, onde 1rem equivale a 16px em um navegador padrão. Portanto, p-4 resolve-se em padding: 1rem (16px), p-2 é 0,5rem (8px) e p-6 é 1,5rem (24px). As exceções são spacing-0 (0px) e spacing-px (1px), que ignoram a unidade rem para que você possa colocar bordas ou espaços perfeitos em pixels sem cálculos.
Por que os frameworks de utilidades responsivos usam consultas de largura mínima por padrão?

Os frameworks mobile-first, como o Tailwind, usam consultas de largura mínima para que as estilos básicos sejam aplicados ao menor viewport e sejam progressivamente aprimorados em telas maiores. Isso corresponde à forma como os navegadores móveis renderizam antes de conhecer a configuração final, evita o flash de estilo errado em conexões lentas e permite que cada ponto de referência sobrescreva apenas o que muda — mantendo o cascade aditivo em vez de subtrativo.