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

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas