Convertidor de variables CSS a configuración de Tailwind

¿Qué hace este convertidor?

Muchos proyectos empiezan con tokens de diseño escritos como propiedades personalizadas CSS: --primary: #ff0055;, --brand-500: #6366f1;. Al adoptar Tailwind necesitas esos mismos colores en su tema para que clases como bg-primary y text-brand-500 existan. Reescribirlos a mano es lento y propenso a errores; esta herramienta analiza cada propiedad personalizada, conserva las que son colores y genera la estructura de Tailwind por ti.

Cómo se agrupan las variables

• --brand-50 … --brand-900 se convierten en un objeto anidado brand: { 50: …, 900: … }, lo que te da bg-brand-50 hasta bg-brand-900.
• Los sufijos como -light, -dark, -hover y -foreground se agrupan bajo su nombre base; la variable sin sufijo pasa a ser DEFAULT, así que bg-primary y bg-primary-light funcionan ambas.
• El prefijo color- se elimina (--color-surface → surface).
• Los tokens que no son colores, como --radius-md: 8px o las pilas de fuentes, se omiten y se listan.

Tailwind v3 frente a v4

Tailwind v3 configura los colores en JavaScript dentro de theme.extend.colors. Tailwind v4 trasladó la configuración a CSS: cualquier variable --color-* dentro de un bloque @theme genera utilidades de color, y la paleta por defecto de v4 usa OKLCH, por eso la salida v4 convierte los valores literales a oklch().

¿Valores literales o referencias var()?

Referenciar variables (primary: 'var(--primary)') significa que puedes redefinir --primary dentro de .dark o de un tema de marca y todas las clases de Tailwind se actualizan automáticamente. Ten en cuenta que Tailwind v3 no puede aplicar modificadores de opacidad como bg-primary/50 a colores var() simples; si los necesitas, guarda los canales (--primary: 255 0 85 con rgb(var(--primary) / <alpha-value>)). Tailwind v4 gestiona los modificadores de opacidad sobre variables mediante color-mix().

También se busca como: tailwind config colores, custom properties tailwind, convertir variables css tailwind, tailwind colors config, design tokens tailwind, tailwind v4 @theme, generador tailwind config css.

Herramientas que combinan con: Variables CSS a Tailwind

• Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
• Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
• Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
• Buscador de nombres de color — Pega un código HEX para obtener su nombre más cercano, legible para personas, y nombres de token limpios para tu CSS, SCSS, JavaScript o configuración de Tailwind.