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.

Classes Tailwind para CSS | Ferramenta online grátis

Exemplos

1. Estilização de Card Responsivo

Desenvolvedor Front-end

Contexto

O desenvolvedor precisa replicar o layout de um card construído em Tailwind em um projeto antigo que aceita apenas CSS puro.

Problema

Converter classes de layout flexível, espaçamento responsivo e sombra em CSS estruturado sob uma classe específica.

Como usar

Insira as classes 'flex gap-4 p-6 hover:bg-blue-500/20 md:p-8 rounded-lg shadow-lg' e defina o seletor de escopo como '.card-container'.

classes: "flex gap-4 p-6 hover:bg-blue-500/20 md:p-8 rounded-lg shadow-lg", selector: ".card-container"

Resultado

Obtenção de um bloco CSS contendo as propriedades de flexbox, padding, bordas arredondadas e sombra para a classe '.card-container', além de blocos separados para o estado ':hover' e a media query '@media (min-width: 768px)'.

2. Botão Interativo com Opacidade

Designer de Interface

Contexto

Um designer precisa extrair o código CSS exato de um botão com fundo semitransparente e estados de foco para documentação interna.

Problema

Traduzir a sintaxe de opacidade 'bg-blue-500/75' e variantes de foco para CSS padrão.

Como usar

classes: "bg-blue-500/75 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none", selector: ".btn"

Classes Tailwind para CSS | Ferramenta online grátis | Elysia Tools

Classes Tailwind para CSS

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Estilização de Card Responsivo

2. Botão Interativo com Opacidade

Perguntas frequentes

Tailwind CSS Samples

Exemplos do Framework CSS Bulma

Exemplos de Seletores CSS

Amostras CSS

Conversor de Markdown para PDF

Conversor Markdown para HTML

Conversor HTML para Markdown

Explicador de Expressões Cron

Ferramentas de exportação, OCR e conversão de Markdown

Ferramentas de escrita e publicacao em Markdown

Ferramentas de Redacao, Extracao e Publicacao de Documentacao

Ferramentas de codificacao e conversao de audio