Conversor CSS para Tailwind

Cole propriedades CSS e obtenha as classes utilitárias equivalentes do Tailwind CSS instantaneamente.

Entrada CSS
Classes Tailwind16 classes geradas

flex flex-col items-center justify-between gap-4 p-6 m-2 w-full rounded-lg bg-[#1a1a2e] text-[#ffffff] text-base font-semibold cursor-pointer overflow-hidden relative

O Que É Tailwind CSS?

Tailwind CSS é um framework CSS utility-first que fornece classes CSS de baixo nível que você compõe diretamente no seu HTML em vez de escrever folhas de estilo personalizadas. Em vez de escrever display: flex; flex-direction: column; gap: 16px, você escreve flex flex-col gap-4. A abordagem do Tailwind elimina problemas de especificidade CSS, permite prototipagem rápida e mantém os estilos junto ao markup.

Como Funciona o Conversor

Cole uma ou mais declarações de propriedades CSS na caixa de entrada (como padding: 16px ou display: flex). O conversor analisa cada declaração e busca a melhor classe utilitária Tailwind correspondente. Valores de espaçamento são mapeados para a escala de 4px do Tailwind (ex.: 16px → p-4). Cores são produzidas como classes de valores arbitrários como bg-[#FF5733]. Propriedades sem equivalente direto no Tailwind são preservadas como comentários.

O Que Este Conversor Suporta

O conversor lida com as propriedades CSS mais comuns: display, flexbox (flex-direction, justify-content, align-items, gap), grid, padding, margin, width, height, font-size, font-weight, text-align, border-radius, background-color, color, cursor, overflow, position e z-index. Valores numéricos são mapeados automaticamente para o valor mais próximo da escala Tailwind.

Exemplos CSS para Tailwind

  • display: flex → flex
  • padding: 16px → p-4
  • border-radius: 9999px → rounded-full
  • font-weight: bold → font-bold
  • background-color: #1a1a1a → bg-[#1a1a1a]