Conversor de CSS Variables para Tailwind Config

O que este conversor faz?

Muitos projetos começam com design tokens escritos como propriedades customizadas CSS — --primary: #ff0055;, --brand-500: #6366f1;. Ao adotar o Tailwind, você precisa das mesmas cores no tema dele para que classes como bg-primary e text-brand-500 existam. Redigitar tudo é lento e sujeito a erros; esta ferramenta analisa cada propriedade customizada, mantém as que são cores e gera a estrutura do Tailwind para você.

Como as variáveis são agrupadas

• --brand-50 … --brand-900 viram um objeto aninhado brand: { 50: …, 900: … }, liberando bg-brand-50 até bg-brand-900.
• Sufixos como -light, -dark, -hover e -foreground são agrupados sob o nome base; a variável sem sufixo vira DEFAULT, então bg-primary e bg-primary-light funcionam juntos.
• O prefixo color- no início é removido (--color-surface → surface).
• Tokens que não são cores, como --radius-md: 8px ou pilhas de fontes, são ignorados e listados.

Tailwind v3 vs v4

O Tailwind v3 configura cores em JavaScript dentro de theme.extend.colors. O Tailwind v4 passou a configuração para o CSS: qualquer variável --color-* dentro de um bloco @theme gera utilitários de cor, e a paleta padrão da v4 usa OKLCH — por isso a saída v4 converte valores literais para oklch().

Valores literais ou referências var()?

Referenciar variáveis (primary: 'var(--primary)') significa que você pode redefinir --primary dentro de .dark ou de um tema de marca, e todas as classes do Tailwind acompanham automaticamente. Observe que o Tailwind v3 não consegue aplicar modificadores de opacidade como bg-primary/50 em cores var() simples; se precisar deles, armazene os canais (--primary: 255 0 85 com rgb(var(--primary) / <alpha-value>)). O Tailwind v4 lida com modificadores de opacidade em variáveis via color-mix().

Também pesquisado como: tailwind config, css custom properties, cores tailwind, tema tailwind, @theme, design tokens, tailwind v4.

Ferramentas que combinam com: CSS Variables para Tailwind

• Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
• Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
• Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
• Nome da Cor — Cole um código HEX para descobrir o nome mais próximo da cor e nomes de tokens limpos para o seu CSS, SCSS, JavaScript ou configuração do Tailwind.