Softonic

CSS para Tailwind

Etapa 1 / 2
Converter para Tailwind

Migrar uma folha de estilo legada para Tailwind uma regra de cada vez é tedioso. Este conversor pega um bloco de CSS simples, com ou sem seletores e chaves, e reescreve cada declaração como uma utilidade do Tailwind. Pares reconhecidos mapeiam para utilidades nomeadas como flex, items-center ou rounded-lg, e qualquer outra coisa recai na sintaxe de valor arbitrário do Tailwind [property:value], para que nada seja descartado silenciosamente.

Como o conversor processa seu CSS

  1. 1

    Cole o CSS

    Cole uma regra completa como `.card { padding: 16px; border-radius: 8px; }` ou apenas as declarações dentro das chaves.

  2. 2

    O parser remove comentários

    Comentários em bloco `/* ... */` são removidos antes que as declarações sejam divididas por ponto e vírgula.

  3. 3

    Cada declaração é mapeada

    Propriedades comuns mapeiam para utilidades reais do Tailwind (espaçamento, raio, tamanho da fonte, flex, exibição, alinhamento de texto); desconhecidos recuam para `[prop:value]`.

  4. 4

    Copie e aplique

    Cole a lista de classes no atributo `class` do elemento HTML correspondente.

O que é mapeado para utilidades nomeadas

O tema padrão do Tailwind não pode cobrir todos os possíveis valores CSS, então o conversor prioriza aqueles onde uma utilidade nomeada existe e usa valores arbitrários em todos os outros.

Mapeamentos diretos

Declaração CSS Utilidade Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Mapeamentos cientes da escala

Padding, margem, largura, altura, dimensões mínimas/máximas dividem um valor em px por 4 para produzir um passo de espaçamento do Tailwind, padding: 16px se torna p-4, width: 32px se torna w-8. Valores que não caem em um passo limpo recuam para valores arbitrários na utilidade correspondente, por exemplo width: 37px se torna w-[37px].

border-radius é mapeado para a utilidade nomeada mais próxima (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Tamanhos acima de 16px se tornam rounded-full, que é útil para pílulas, mas errado para raios estranhamente grandes, inspecione a saída antes de enviar.

font-size é agrupado em text-xs até text-3xl por limites de pixel.

Avisos

  • Pseudo-classes, consultas de mídia e seletores não são traduzidos; apenas as declarações dentro das chaves são. Você ainda precisa adicionar variantes como hover: ou md: manualmente.
  • Cores aparecem como valores arbitrários, como text-[#1f2937], porque o conversor não conhece sua paleta de tema do Tailwind. Troque por text-gray-800 ou um token personalizado manualmente.
  • Propriedades abreviadas que você usa raramente (border, background, transition) são emitidas literalmente como [property:value], verifique-as antes de enviar.

Perguntas frequentes

A saída usa nomes de utilidades que são estáveis entre Tailwind v3 e v4. Valores arbitrários entre colchetes também são válidos em ambos. Você pode querer re-tokenizar cores na sua paleta @theme do v4 após colar.

O conversor não tem visibilidade sobre sua escala de cores tailwind.config.js. Mapeie o valor arbitrário para o token de paleta mais próximo manualmente, por exemplo text-gray-800 ou um token de marca que você definiu.

Sim, cole várias regras. A ferramenta emitirá uma lista de classes por seletor, separadas por um comentário /* seletor */ para que você possa alinhá-las com o HTML correspondente.

O CSS é enviado ao nosso servidor para que o conversor o transforme em classes Tailwind. Ele não é armazenado e não aparece no link da página.

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas