La paleta de colores extendida de Tailwind CSS te da acceso a decenas de tonos predefinidos que puedes aplicar directamente con clases utilitarias o personalizar dentro de tu proyecto. Aquí entenderás cómo funciona esa paleta, cómo probar colores en el playground oficial y cómo definir tus propios colores semánticos como primary o secondary.

Qué incluye la nueva paleta de colores de Tailwind

La actualización trajo una variedad enorme de tonos comparada con la versión inicial del framework. Cada color se divide en shades numerados, lo que te permite elegir desde un tono muy claro hasta uno muy oscuro sin escribir CSS adicional.

Entre los colores disponibles encuentras:

• Grises en múltiples variantes, no solo uno como en la versión 1.0.
• Rojos, naranjas, amber y amarillos.
• Verdes, teal, azules, índigo, morados y rosas.
• Tonos como amber que no existían en la versión anterior.

¿Qué es un shade en Tailwind? Es el número que define la intensidad de un color, por ejemplo red-300 es un rojo claro y red-500 es un rojo medio. Van de 50 a 900.

El color teal en su tonalidad cercana a 400 es el que Tailwind usa en su propio logo, lo cual te da una pista del estilo que el framework propone por defecto [02:50].

Cómo comparo la versión 1.9.6 con la actual

En la versión vieja existía un solo gris, un solo amarillo y pocas opciones por color. En la nueva paleta tienes múltiples tonos por familia y categorías nuevas como amber. La diferencia es notoria y reduce la necesidad de personalizar colores básicos desde cero.

Cómo aplico colores con clases utilitarias en el playground

El playground de Tailwind es el entorno oficial donde puedes escribir HTML con clases del framework y ver el resultado al instante. Es ideal para experimentar antes de llevar el código a tu proyecto real.

Para aplicar un color de fondo usas el prefijo bg seguido del nombre del color y el shade. Un ejemplo básico:

html

<div class="w-64 h-64 bg-red-300"></div> <div class="w-32 h-96 bg-red-500"></div>

Aquí, w-64 define el ancho, h-64 la altura y bg-red-300 aplica un rojo claro como fondo. Si cambias a bg-blue-600, obtienes un azul más intenso. Cada clase es independiente y se combina con otras para construir el componente completo.

Un detalle útil: al pasar el mouse sobre una clase de tamaño en el playground, ves a cuántos rems y píxeles equivale esa medida. Eso facilita entender el sistema de espaciado sin abrir la documentación [03:30].

¿Qué es el playground de Tailwind? Es un editor en línea oficial donde pruebas clases del framework y ves el resultado en vivo, sin instalar nada localmente.

Cómo personalizo colores propios en la configuración

Aunque la paleta es amplia, la mayoría de proyectos necesitan colores con nombres semánticos como primaryColor o secondaryColor. Tailwind te permite definirlos dentro de la sección theme.colors de tu archivo de configuración.

Puedes asignar un color de dos formas:

1. Usando un valor hexadecimal personalizado.
2. Reutilizando un color que ya existe en Tailwind, como colors.indigo, colors.yellow o colors.gray.

Un ejemplo conceptual de configuración sería:

js theme: { colors: { primary: colors.indigo, secondary: colors.yellow, neutral: colors.gray, } }

Con esto, en tu HTML escribes bg-primary-500 y Tailwind interpreta que se trata del shade 500 del color índigo. Esto te da control total sobre la identidad visual del proyecto sin perder la lógica de shades.

Por qué conviene definir una paleta propia

Trabajar con nombres semánticos hace tu código más legible y mantenible. Si mañana decides cambiar el color principal de índigo a otro tono, solo modificas la configuración y todo el proyecto se actualiza. No tienes que buscar y reemplazar bg-indigo-500 clase por clase.

Además, una paleta propia te ayuda a mantener consistencia entre componentes y a comunicar mejor la intención de cada color: primary para acciones principales, secondary para acentos y neutral para fondos y textos.

Cómo decido entre colores nativos y colores personalizados

La decisión depende del alcance de tu proyecto. Si estás creando un prototipo rápido o una interfaz interna, los colores nativos de Tailwind cubren prácticamente cualquier necesidad. Si trabajas en un producto con identidad de marca, lo recomendable es mezclar ambos: usar la estructura de shades de Tailwind y agregar uno o dos colores personalizados con valores hexadecimales propios.

Más adelante también podrás aplicar estos mismos colores como texto, no solo como fondo, usando el prefijo correspondiente. Eso amplía el sistema de diseño sin romper la consistencia de tu paleta.

¿Ya tienes idea de cómo será tu paleta? Cuéntame en los comentarios qué colores piensas usar como primary y secondary en tu proyecto.