Colores Tailwind vs. variables CSS

 ¿Cuál es la diferencia, las ventajas y desventajas de definir un color directamente en tailwind.config.js o crear una variable CSS?

Muy buena pregunta, Gabriel 👌. La diferencia entre definir un color directamente en tailwind.config.js y usar una variable CSS (--color-primary) está en el nivel de control y flexibilidad que buscás.

🔹 Definir color en tailwind.config.js

Cómo funciona

js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1E40AF",
      },
    },
  },
};

Luego lo usás con clases como bg-brand, text-brand, fill-brand.

Ventajas

• Integración directa con Tailwind: todas las utilidades (bg-, text-, fill-, stroke-) se generan automáticamente.

• Consistencia: el color queda centralizado en la configuración, fácil de mantener.

• Autocompletado: muchos editores reconocen los nombres de colores definidos en Tailwind.

• Sin dependencias externas: no necesitás definir variables CSS aparte.

Desventajas

• Menos dinámico: cambiar el color requiere recompilar Tailwind.

• Temas múltiples: no es tan sencillo alternar entre paletas (ej. modo oscuro, temas personalizados).

• No se puede modificar en runtime: el color queda fijo en el build.

🔹 Usar una variable CSS (--color-primary)

Cómo funciona

css

:root {
  --color-primary: #1E40AF;
}
.dark {
  --color-primary: #F59E0B;
}

js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
      },
    },
  },
};

Ventajas

• Dinámico: podés cambiar el valor de la variable en runtime (ej. con JavaScript o cambiando clases).

• Temas múltiples: muy fácil de implementar (ej. data-theme="dark" redefine variables).

• Interoperabilidad: las variables CSS pueden usarse fuera de Tailwind también.

• Flexibilidad: podés animar o transicionar colores cambiando la variable.

Desventajas

• Más configuración: tenés que definir las variables en tu CSS además de en Tailwind.

• Menos autocompletado: los nombres de variables no aparecen como sugerencias en algunos editores.

• Dependencia del runtime: si la variable no está definida correctamente, el color puede no renderizarse.

🔹 Comparación rápida

Aspecto	Tailwind config directo	Variable CSS
Facilidad inicial	Muy simple, todo en Tailwind	Requiere definir variables en CSS
Cambio en runtime	No posible (requiere rebuild)	Sí, dinámico
Temas múltiples	Más complejo, requiere plugins o duplicar paletas	Natural y flexible
Autocompletado	Mejor soporte en editores	Limitado
Uso fuera de Tailwind	No	Sí, variables CSS son globales

✨ Conclusión

• Si tu proyecto tiene una paleta fija y estable, definir colores en tailwind.config.js es lo más simple y directo.

• Si necesitás temas dinámicos, modo oscuro avanzado o cambiar colores en runtime, conviene usar variables CSS y referenciarlas desde Tailwind.

¿Querés que te arme un ejemplo práctico de tema claro/oscuro donde el color fill-primary cambia automáticamente usando variables CSS?