Colores personalizados en Tailwind CSS

Domina la paleta de colores en Tailwind CSS con confianza: aplica colores al texto y al fondo, crea gradientes con precisión y arma una paleta personalizada directamente en la configuración. Aquí verás cómo usar las clases de utilidad con sintaxis clara, aprovechar el autocompletado del editor y componer un diseño consistente y escalable.

¿Cómo usar la paleta de colores de Tailwind CSS por defecto?

La base es sólida: nombres de color como slate, gray, zinc, blue, green, pink y más, con escalas de 50 a 950 para controlar la intensidad. Con una sintaxis simple de clases de utilidad, aplicas color al texto o al fondo sin esfuerzo.

• Usa la clase de texto con color y tono: text + color + escala.
• Aplica fondo con bg + color + escala.
• Entre 50 y 950: tonos bajos son más claros y tonos altos más oscuros.
• El editor con autocompletado sugiere paleta y tonos al escribir bg- o text-.

<!-- Texto en azul oscuro -->
<p class="text-blue-900">Texto azul con tono 900.</p>

<!-- Fondo verde suave con padding y texto blanco -->
<div class="bg-green-200 p-4 text-white">Caja con background verde 200.</div>

¿Qué sintaxis base se aplica?

• Para texto: text-color-escala como text-blue-900.
• Para fondo: bg-color-escala como bg-green-200.
• Para espaciado: m-8, mt-8, p-4 para márgenes y padding.

¿Qué habilidades desarrollas aquí?

• Identificar nombres de color y escalas 50–950.
• Aplicar clases de utilidad de color y espaciado en contexto.
• Elegir tonos con autocompletado del editor para trabajar más rápido.

¿Cómo crear gradientes con utilidades from, via y to?

Los gradientes en Tailwind son directos y flexibles. Definir la dirección, el color inicial, intermedio y final permite resultados consistentes con pocas clases. La idea clave: bg-gradient-to-dirección, luego from-color, via-color y to-color.

• Define la dirección con bg-gradient-to-r para ir hacia la derecha.
• Establece el inicio con from-color-escala.
• Añade un color intermedio con via-color-escala.
• Cierra el gradiente con to-color-escala.

<!-- Gradiente lineal hacia la derecha: purple → pink → red -->
<div class="mt-8 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 p-4 text-white">
  Gradiente personalizado con tres tonos.
</div>

¿Qué prácticas te ayudan a elegir colores?

• Probar combinaciones con el autocompletado para previsualizar tonos.
• Ajustar escalas para lograr contraste legible con text-white cuando haga falta.
• Variar dirección del gradiente según el diseño requerido.

¿Cómo personalizar colores en tailwind.config con una paleta brand?

Cuando necesitas identidad visual, extiende el theme y define tu paleta personalizada. Así obtienes clases de utilidad propias, listas para usar en HTML, manteniendo la coherencia de marca.

• Extiende colores en theme.extend.colors con un nombre de grupo, por ejemplo brand.
• Define variantes como light, default y dark con valores HEX.
• Usa tus clases como bg-brand-light y text-white directamente en la marca.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3AB0FF',
          default: '#007BFF',
          dark: '#0056B3',
        },
      },
    },
  },
};

<!-- Uso de la paleta personalizada en HTML -->
<p class="bg-brand-light text-white m-4 p-4">
  Texto con color personalizado de la paleta brand.
</p>
<p class="bg-brand-default text-white m-4 p-4">
  Variante default para consistencia visual.
</p>
<p class="bg-brand-dark text-white m-4 p-4">
  Opción dark para mayor contraste.
</p>

¿Qué logras al extender el tema?

• Crear clases de utilidad personalizadas coherentes con tu diseño.
• Centralizar colores para mantenimiento y escalabilidad.
• Reutilizar una paleta de marca en toda la interfaz.

¿Tienes una combinación de colores o gradiente favorita con Tailwind CSS? Comparte tu enfoque y cuéntanos qué resultados obtuviste.