Conversor de Tailwind para CSS

• Conversão instantânea de Tailwind para CSS: o nosso conversor de Tailwind para CSS expande as classes utilitárias em declarações CSS simples em milissegundos. Converta qualquer classe Tailwind - incluindo espaçamento, cores, tipografia, flexbox, grid e transformações - instantaneamente no seu navegador.
• Conversor online seguro de Tailwind para CSS: toda a conversão de Tailwind para CSS roda inteiramente no seu navegador. Os nomes das suas classes e o seu código nunca saem do seu dispositivo, garantindo total privacidade quando você converte Tailwind CSS online.
• Tailwind para CSS - sem instalação: use o nosso conversor de Tailwind para CSS diretamente em qualquer navegador, sem downloads, plugins ou conta. Converta classes Tailwind de qualquer dispositivo - desktop, tablet ou celular - gratuitamente.
• Suporte a variantes responsivas e de pseudoclasses: o nosso conversor de Tailwind para CSS lida com prefixos responsivos (sm:, md:, lg:, xl:) e variantes de pseudoclasses (hover:, focus:, active:, disabled:) - gerando automaticamente as consultas @media e os seletores CSS corretos.

• Migração de Tailwind para CSS nativo: equipes que abandonam o Tailwind CSS usam o nosso conversor para extrair o CSS simples equivalente de cada classe utilitária. Converta a lista de classes de todo o seu componente em declarações CSS e cole-as numa folha de estilos.
• Entender o funcionamento interno do Tailwind: desenvolvedores que aprendem Tailwind CSS usam o nosso conversor para entender exatamente que CSS cada classe utilitária gera. Veja os valores de propriedade precisos por trás de classes como shadow-lg, rounded-xl e transition-colors.
• Integração em projetos sem Tailwind: ao integrar componentes concebidos com Tailwind em projetos que não o usam, o nosso conversor extrai o CSS simples para que você possa aplicar os mesmos estilos sem adicionar o Tailwind como dependência.
• Desenvolvimento de templates de e-mail: templates de e-mail exigem CSS inline ou folhas de estilo simples - as classes Tailwind não funcionam na maioria dos clientes de e-mail. Use o nosso conversor de Tailwind para CSS para extrair as declarações CSS e aplicá-las inline.
• Documentação de design system: equipes de design system usam o nosso conversor de Tailwind para CSS para documentar os valores CSS exatos por trás dos seus design tokens baseados em Tailwind. Gere tabelas de referência CSS de espaçamento, cores e tipografia.
• Depuração e revisão de código: desenvolvedores que depuram problemas de layout usam o nosso conversor de Tailwind para CSS para ver as propriedades CSS exatas aplicadas por uma combinação de classes. Entenda a especificidade, a herança e o comportamento da cascata num relance.

A conversão de Tailwind para CSS é o processo de expandir os nomes das classes utilitárias do Tailwind CSS nas suas declarações de propriedades CSS simples equivalentes. O Tailwind CSS é um framework utility-first em que cada nome de classe corresponde a uma ou mais declarações CSS - por exemplo, flex expande para display: flex , e px-4 expande para padding-left: 1rem; padding-right: 1rem . O nosso conversor de Tailwind para CSS realiza esta expansão para mais de 500 classes utilitárias, cobrindo espaçamento, cores, tipografia, flexbox, grid, bordas, sombras, transformações, transições e muito mais.

1. Cole os nomes das suas classes: insira as classes utilitárias do Tailwind separadas por espaços, em várias linhas, ou diretamente a partir de um atributo className="...". O nosso conversor de tailwind para css remove automaticamente a sintaxe do atributo.
2. Conversão instantânea no navegador: clique em Converter para CSS e a expansão roda inteiramente no seu navegador. Cada classe é comparada com um mapeamento completo do Tailwind v3 e expandida para o seu equivalente CSS. O seu código nunca sai do seu dispositivo.
3. Copie ou baixe o CSS: o CSS gerado é exibido no formato escolhido - regras CSS legíveis, linhas compactas ou apenas declarações. Copie para a área de transferência ou baixe como arquivo .css.

• Utilitários de espaçamento: todos os utilitários de padding (p-, px-, py-, pt-, pr-, pb-, pl-), margin (m-, mx-, my-, mt-, mr-, mb-, ml-), gap, width, height e inset usando a escala de espaçamento completa do Tailwind (de 0 a 96).
• Utilitários de cor: cores de fundo (bg-), cores de texto (text-), cores de borda (border-) e cores de anel (ring-) para todas as cores da paleta do Tailwind, incluindo slate, gray, red, orange, yellow, green, blue, indigo, purple e pink.
• Variantes responsivas e de pseudoclasses: os prefixos responsivos (sm:, md:, lg:, xl:, 2xl:) geram consultas @media envolvidas. Os prefixos de pseudoclasses (hover:, focus:, active:, disabled:, first:, last:, odd:, even:) geram os seletores CSS corretos.
• Layout e tipografia: utilitários de flexbox, grid, display, position, overflow, tamanho de fonte, peso de fonte, altura de linha, espaçamento entre letras, alinhamento de texto, decoração de texto e transformação de texto.

Este conversor de tailwind para css cobre as classes utilitárias padrão do Tailwind CSS v3. Não suporta valores arbitrários (por exemplo, w-[200px] ), extensões de tema personalizadas nem plugins Tailwind de terceiros. As classes não reconhecidas são listadas separadamente para que você possa tratá-las manualmente. Para os resultados mais precisos, use a documentação oficial do Tailwind CSS ou o Tailwind Play CDN para verificar os estilos gerados.