Neste artigo
O que É Tailwind CSS e Porquê Convertê-lo
Tailwind CSS é uma framework CSS utilitária que permite aos programadores estilizar elementos aplicando classes pequenas e de propósito único diretamente no HTML. Em vez de escrever regras CSS personalizadas, compõe estilos inline utilizando nomes de classes como flex, p-4, text-blue-500 e rounded-lg.
Embora o Tailwind acelere o desenvolvimento, existem situações em que precisa do CSS equivalente em formato simples. Pode estar a migrar do Tailwind, a depurar um estilo específico, a partilhar código com uma equipa que não usa a framework ou a aprender o que cada classe utilitária realmente produz. Converter Tailwind para CSS simples colmata essa lacuna instantaneamente.
Como Funciona o Conversor de Tailwind para CSS
O conversor recebe classes utilitárias Tailwind e produz as propriedades e valores CSS padrão equivalentes.
- Cole as suas classes — introduza qualquer conjunto de classes Tailwind como flex items-center gap-4 p-6 bg-white rounded-xl shadow-md
- Veja o resultado CSS — cada utilitário é resolvido na sua declaração CSS correspondente, agrupado num único bloco de regra que pode usar em qualquer lugar
- Trate de variantes responsivas e de estado — prefixos como md:, hover: e dark: são convertidos em media queries e pseudo-seletores adequados no resultado
- Copie ou descarregue — obtenha o CSS simples e cole-o na sua folha de estilos, componente ou ferramenta de design que espera sintaxe CSS padrão
Experimente gratuitamente — sem cadastro
Abrir Conversor de Tailwind para CSS →Quando Utilizar a Conversão de Tailwind para CSS
Converter utilitários Tailwind para CSS padrão é útil em vários cenários comuns de desenvolvimento e design.
- Migração de framework — extraia as regras CSS exatas das classes Tailwind ao migrar um projeto para CSS simples, Sass ou outra abordagem de estilos
- Aprender CSS — veja a que corresponde cada classe utilitária Tailwind por baixo, o que aprofunda a compreensão da especificação CSS
- Documentação de sistemas de design — exporte CSS padrão a partir de protótipos baseados em Tailwind para que designers e programadores que não usam Tailwind possam consultar os valores exatos
Perguntas Frequentes
O conversor trata de todas as classes Tailwind?
O conversor suporta o conjunto principal de utilitários Tailwind CSS, incluindo layout, espaçamento, tipografia, cores, bordas, sombras, transições e transformações. Classes personalizadas definidas no ficheiro tailwind.config ou por plugins não são reconhecidas, uma vez que o conversor funciona com a especificação Tailwind predefinida.
Os breakpoints responsivos são convertidos?
Sim. Os prefixos responsivos como sm:, md:, lg: e xl: são convertidos nas media queries CSS apropriadas utilizando os valores de breakpoint predefinidos do Tailwind. O resultado envolve os estilos responsivos em blocos de media query corretamente estruturados.
Posso converter CSS de volta para Tailwind?
Esta ferramenta converte numa única direção, de Tailwind para CSS. A conversão inversa é significativamente mais difícil porque múltiplas combinações de propriedades CSS podem corresponder ao mesmo utilitário Tailwind, e valores personalizados podem não ter equivalentes utilitários exatos. Para a conversão de CSS para Tailwind, geralmente são necessárias ferramentas especializadas ou mapeamento manual.