La paleta de colores de Tailwind CSS resuelve uno de los grandes dolores del diseño web: elegir tonos coherentes sin tener que memorizar códigos hexadecimales. Aquí aprendes a aplicar colores predefinidos, crear degradados y personalizar tu propia paleta para proyectos reales.

¿Cómo funciona la paleta de colores por defecto en Tailwind?

Tailwind incluye una paleta lista para usar con nombres como slate, gray, blue, green, pink o orange, y cada color se acompaña de una escala de tonalidad que va del 50 al 950 [01:05]. Mientras más alto el número, más oscuro el tono.

La sintaxis sigue un patrón muy claro: defines la propiedad, el color y la intensidad. Por ejemplo, text-blue-900 aplica un azul oscuro al texto, y bg-green-200 pinta un fondo verde claro a una caja.

¿Qué significan los números del 50 al 950 en Tailwind? Son niveles de intensidad del color. El 50 es el tono más claro y el 950 el más oscuro. Te permiten elegir contraste sin salir de la misma familia cromática.

¿Cómo aplico color a texto y fondos?

En el playground puedes probar combinaciones rápidas. Para texto usas el prefijo text-, y para fondos el prefijo bg-:

• text-blue-900 para un párrafo en azul oscuro.
• text-pink-500 o text-pink-400 para variaciones de rosa.
• bg-green-200 con un padding para visualizar mejor la caja.

El autocompletado del editor te muestra la paleta y los tonos de forma visual, así que no necesitas memorizar nada [03:50].

¿Cómo crear degradados con Tailwind CSS?

Los degradados se construyen con la utilidad bg-gradient seguida de la dirección y los puntos de color [04:30]. La lógica es la misma de un linear gradient en CSS, pero traducida a clases.

La estructura básica usa tres anclas: from, via y to, que marcan el inicio, el punto intermedio y el final del degradado.

¿Qué clases necesito para un degradado de tres colores?

Un ejemplo aplicado a un div con margen y padding interior se vería así:

html

<div class="m-8 p-8 text-white bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"> gradientes </div>

Desglosando cada parte:

1. bg-gradient-to-r define la dirección hacia la derecha.
2. from-purple-400 establece el color inicial.
3. via-pink-500 agrega un tono intermedio.
4. to-red-500 cierra el degradado.
5. text-white y p-8 mejoran la visualización del contenido.

Con pocas líneas tienes un degradado personalizado y listo para integrar, sin escribir CSS adicional.

¿Qué hace la clase bg-gradient-to-r? Indica que el degradado fluye de izquierda a derecha. Tailwind ofrece variantes para otras direcciones como to-l, to-t o to-b.

¿Cómo personalizar tu propia paleta de colores en Tailwind?

La magia real aparece cuando creas tus propios colores en el archivo de configuración [07:20]. Esto te permite reutilizar la identidad visual de tu marca con clases de utilidad personalizadas.

Dentro del archivo tailwind.config.js extiendes el tema y agregas un objeto de colores con el nombre que quieras, por ejemplo brand:

js module.exports = { theme: { extend: { colors: { brand: { light: '#3ab0ff', default: '#007bff', dark: '#0056b3', }, }, }, }, }

Con esa configuración ya puedes usar clases como bg-brand-light, bg-brand-default o bg-brand-dark directamente en tu HTML, y el editor las reconocerá con autocompletado.

¿Cómo aplico mis colores personalizados en HTML?

Una vez declarada la paleta, basta con llamarla en el atributo class. Por ejemplo, un párrafo con fondo de marca y texto blanco se vería así:

html

<p class="bg-brand-light text-white m-4 p-4"> texto con color personalizado </p>

Algunas claves para sacarle provecho a esta personalización:

• Usa nombres semánticos como light, default y dark para que tu equipo entienda el propósito.
• Mantén los códigos hex documentados dentro de la configuración.
• Aplica la misma lógica a otras propiedades como tipografía, spacing o breakpoints cuando necesites algo especial para tu diseño.

Esta misma estructura sirve para cualquier conjunto de propiedades que quieras estandarizar en tus desarrollos web, así que no se limita solo a colores.

¿Qué paleta vas a personalizar primero en tu próximo proyecto? Comparte tu combinación favorita en los comentarios.