# Classes Tailwind para CSS Converte classes Tailwind (ex. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6) em CSS equivalente e copiável para projetos sem Tailwind. Cobre spacing, flex, grid, cores, tipografia, bordas, efeitos, transformações, transições e variantes responsivas/estado. > Página canônica: https://elysiatools.com/pt/tools/tailwind-class-to-css-converter - **Categoria:** Development - **Palavras-chave:** tailwind, tailwind para css, snippet css, classes utilitárias, tailwind playground, conversor css, flex, grid, hover ## Visão geral Veja exatamente o que uma classe Tailwind produz — depois copie o CSS puro para qualquer projeto. **Por quê.** Tailwind é ótimo, mas às vezes você precisa do CSS cru: um projeto sem Tailwind, um template de email, uma auditoria de design tokens. Cole as classes e obtenha CSS equivalente instantaneamente. **Cobertura.** O motor de regras lida com os utilitários mais comuns: layout (flex/grid/gap), spacing, tamanhos, cores, tipografia, bordas, efeitos, transformações, transições e variantes responsivas/estado. **Modificador de opacidade.** A sintaxe `bg-blue-500/20` se expande para `rgba()`. **Limitações.** É uma tabela de regras estática, não o motor JIT completo. Para 100% de fidelidade use o compilador oficial do Tailwind. ## Entradas - **Classes Tailwind** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md - **Seletor de escopo** (select) ## Quando usar - Quando você precisa estilizar um template de e-mail HTML que não suporta frameworks modernos e exige CSS tradicional inline ou incorporado. - Ao migrar componentes estilizados com Tailwind CSS para uma base de código legada que utiliza apenas CSS puro ou pré-processadores. - Durante a criação de provas de conceito rápidas ou auditorias de design tokens onde visualizar o CSS bruto gerado pelas classes utilitárias é necessário. ## Como funciona - Insira as classes utilitárias do Tailwind CSS (incluindo variantes como hover, active ou breakpoints responsivos) no campo de entrada. - Defina o seletor de escopo desejado, como uma classe personalizada (.minha-classe) ou :root para variáveis globais. - O motor de regras estáticas mapeia cada utilitário para sua propriedade CSS equivalente, convertendo inclusive modificadores de opacidade em valores RGBA. - Copie o código CSS gerado diretamente para a sua folha de estilo ou componente. ## Casos de uso - Conversão de classes de layout flex e grid para estilização de componentes isolados em projetos legados. - Extração de estilos de botões com estados hover e focus para criação de folhas de estilo puras. - Geração de CSS equivalente a partir de classes de espaçamento e tipografia para uso em templates de e-mail marketing. ## Perguntas frequentes ### Como a ferramenta lida com modificadores de opacidade como bg-blue-500/20? Ela converte a sintaxe de cor e transparência do Tailwind v3 diretamente em valores rgba(), garantindo compatibilidade em qualquer navegador sem necessidade de funções modernas. ### Posso converter classes responsivas como md:p-6? Sim, a ferramenta reconhece prefixos de breakpoint (como sm, md, lg) e gera as respectivas regras dentro de blocos @media. ### O conversor suporta valores arbitrários como w-\[327px\]? Por utilizar uma tabela de regras estática e não o compilador JIT oficial, o suporte a valores arbitrários é limitado e processado como melhor esforço. ### É possível aplicar o CSS gerado a um seletor específico? Sim, você pode escolher um seletor personalizado (ex: .my-class) para encapsular todas as propriedades geradas ou usar :root. ### Preciso ter o Tailwind instalado para usar esta ferramenta? Não, a conversão é feita de forma estática e direta no navegador, sem qualquer dependência ou necessidade de instalação do framework. ## Ferramentas relacionadas - [Conversor de Markdown para PDF](https://elysiatools.com/pt/tools/markdown-to-pdf-converter): Converter arquivos Markdown em documentos PDF com formatação, realce de sintaxe e estilo - [Conversor Markdown para HTML](https://elysiatools.com/pt/tools/markdown-to-html): Converte texto Markdown para HTML com opções de formato personalizáveis - [Conversor HTML para Markdown](https://elysiatools.com/pt/tools/html-to-markdown): Converte conteúdo HTML para formato Markdown com opções de conversão personalizáveis - [Explicador de Expressões Cron](https://elysiatools.com/pt/tools/cron-expression-explainer): Analisa uma expressão cron (5/6 campos ou Quartz) em uma descrição em linguagem natural, detalha os campos e lista as próximas N execuções em qualquer zona IANA, com explicação por IA - [Cartão de especificação responsiva Figma iOS Android pt dp sp](https://elysiatools.com/pt/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Converte valores px do Figma para as unidades corretas de cada plataforma e gera um spec card para devs: pt do iOS (@1x/@2x/@3x com px renderizados por escala), dp/sp do Android (tabela de renderização mdpi…xxxhdpi e escala de fonte), rem/vw web com snippet clamp(); auditoria de alvos de toque mínimos (44pt iOS / 48dp Android / 44px e 24px WCAG) com classes de janela do Material e breakpoints do Tailwind. - [Visualizador Markdown](https://elysiatools.com/pt/tools/markdown-preview): Converte Markdown para HTML com destaque de sintaxe e temas personalizáveis - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Lista Indentada para Árvore ASCII](https://elysiatools.com/pt/tools/ascii-tree-from-indented-list): Converte uma lista hierárquica indentada (2/4 espaços ou tab; prefixos -, *, 1. opcionais) em uma árvore de diretórios ASCII copiável. Dois estilos: caixa Unicode e ASCII clássico. Opções para linhas guia completas, espaços finais e folhas entre colchetes. ## Exemplos - [Tailwind CSS Samples](https://elysiatools.com/pt/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS - [Exemplos de Seletores CSS](https://elysiatools.com/pt/samples/css-selectors): Coleção de exemplos de seletores CSS para testes de extração e análise - [Amostras CSS](https://elysiatools.com/pt/samples/css-viewer-samples): Arquivos de amostra para o visualizador CSS no navegador