Conversor de Tailwind para CSS
Expande utilitários Tailwind em declarações CSS.
Sobre esta ferramenta
A ferramenta expande os utilitários mais comuns do Tailwind num bloco de regras CSS. Variantes como hover: ou md: aparecem apenas nas notas, porque exigem um seletor próprio ou uma media query.
Como usar
Copie as classes de um componente, execute a conversão e leve as declarações para a sua folha de estilos ou compare-as com os tokens de design. Os utilitários não reconhecidos ficam listados nas notas.
Exemplo
O exemplo incluído reúne utilitários comuns de layout e espaçamento.
Entrada
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semiboldSaída
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}Dica
Útil quando a equipa ainda mantém uma camada de CSS a par do Tailwind.
Bom saber
Que classes Tailwind ele entende?
Um subconjunto prático: display e position, alinhamento flex, a escala de espaçamento para padding, margin, gap e dimensões, tamanho e peso da fonte, border-radius, algumas sombras, colunas de grid, opacidade, z-index, uma lista curta de cores comuns e valores arbitrários como w-[320px] ou bg-[#38bdf8]. Tudo o resto é listado nas notas em vez de adivinhado.
O que acontece com hover:, md: e outras variantes?
São assinaladas nas notas, não expandidas. Uma variante precisa de um seletor ou de uma media query à volta da declaração, por isso envolva-as manualmente na sua folha de estilos.