Colores y temas con Tailwind v4

Colores y temas en Tailwind v4

El sistema de colores es una de las partes más ricas de Tailwind. Incluye una paleta completa de colores con escala de 50 a 950, soporte para modificadores de opacidad, y en v4, una forma elegante de definir temas personalizados directamente en CSS con @theme.

La paleta de colores por defecto

Tailwind incluye estas familias de colores:

• Neutros: slate, gray, zinc, neutral, stone
• Rojos: red, orange, amber
• Amarillos/Verdes: yellow, lime, green
• Azules: teal, cyan, sky, blue, indigo
• Morados/Rosas: violet, purple, fuchsia, pink, rose
• Especiales: white, black, transparent, current

Escala de intensidad

Cada familia de colores tiene intensidades del 50 al 950:

<!-- Escala completa de azul -->
<div class="bg-blue-50">Muy claro — fondos de badges</div>
<div class="bg-blue-100">Muy claro — fondos hover</div>
<div class="bg-blue-200">Claro</div>
<div class="bg-blue-300">Claro-medio</div>
<div class="bg-blue-400">Medio</div>
<div class="bg-blue-500">Estándar — el "azul" de la paleta</div>
<div class="bg-blue-600">Oscuro — botones principales</div>
<div class="bg-blue-700">Más oscuro — hover de botones</div>
<div class="bg-blue-800">Muy oscuro</div>
<div class="bg-blue-900">Casi negro azulado</div>
<div class="bg-blue-950">Prácticamente negro</div>

Propiedades de color disponibles

Las mismas familias de colores funcionan para múltiples propiedades CSS:

<!-- Texto -->
<p class="text-blue-600">Texto azul</p>

<!-- Fondo -->
<div class="bg-blue-100">Fondo azul claro</div>

<!-- Borde -->
<div class="border border-blue-300">Borde azul claro</div>

<!-- Ring (outline de focus) -->
<button class="focus-visible:ring-2 focus-visible:ring-blue-500">Botón</button>

<!-- Outline -->
<div class="outline outline-2 outline-blue-400">Outline</div>

<!-- Decoración de texto -->
<a class="underline decoration-blue-500">Enlace subrayado en azul</a>

<!-- Caret (cursor en inputs) -->
<input class="caret-blue-500" type="text" />

<!-- Sombra de color -->
<button class="shadow-lg shadow-blue-500/50">Botón con sombra azul</button>

<!-- Sombra de texto -->
<h1 class="drop-shadow-lg drop-shadow-blue-500/30">Título con sombra</h1>

Modificadores de opacidad

En Tailwind v4, la opacidad se controla con la barra / después del valor de color:

<!-- Fondos con opacidad -->
<div class="bg-blue-500/10">10% opacidad — fondos de badges sutiles</div>
<div class="bg-blue-500/20">20% opacidad</div>
<div class="bg-blue-500/50">50% opacidad — overlays</div>
<div class="bg-blue-500/75">75% opacidad</div>
<div class="bg-blue-500/90">90% opacidad</div>

<!-- Texto con opacidad -->
<p class="text-gray-900/60">Texto secundario con opacidad</p>
<p class="text-white/80">Texto blanco suavizado sobre imagen</p>

<!-- Bordes con opacidad -->
<div class="border border-gray-900/10">Borde casi invisible</div>

<!-- Muy útil para overlays en imágenes -->
<div class="relative">
  <img src="hero.jpg" alt="" class="w-full h-96 object-cover" />
  <div class="absolute inset-0 bg-black/40 flex items-end p-8">
    <h2 class="text-white text-3xl font-bold">Título sobre imagen</h2>
  </div>
</div>

Gradientes

<!-- Gradiente lineal -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Gradiente horizontal izquierda → derecha
</div>

<!-- Todas las direcciones -->
<div class="bg-gradient-to-t">   de abajo a arriba</div>
<div class="bg-gradient-to-tr">  de abajo-izquierda a arriba-derecha</div>
<div class="bg-gradient-to-r">   de izquierda a derecha</div>
<div class="bg-gradient-to-br">  de arriba-izquierda a abajo-derecha</div>
<div class="bg-gradient-to-b">   de arriba a abajo</div>
<div class="bg-gradient-to-bl">  de arriba-derecha a abajo-izquierda</div>
<div class="bg-gradient-to-l">   de derecha a izquierda</div>
<div class="bg-gradient-to-tl">  de abajo-derecha a arriba-izquierda</div>

<!-- Con punto intermedio -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Gradiente de 3 colores
</div>

<!-- Gradiente con opacidad (muy elegante) -->
<div class="bg-gradient-to-b from-transparent via-black/30 to-black/80">
  Overlay fade para imágenes
</div>

Definir un tema de colores con @theme

La directiva @theme en v4 reemplaza completamente la sección theme.colors de tailwind.config.js. Define variables CSS con el prefijo --color- y Tailwind genera automáticamente todas las utilidades:

@import "tailwindcss";

@theme {
  /* Colores de marca — Tailwind generará text-brand-*, bg-brand-*, etc. */
  --color-brand-50:  #fff3ee;
  --color-brand-100: #ffe6d8;
  --color-brand-200: #ffcdb0;
  --color-brand-300: #ffaa80;
  --color-brand-400: #ff7d47;
  --color-brand-500: #ff530f;
  --color-brand-600: #e63d00;
  --color-brand-700: #c23300;
  --color-brand-800: #a02b00;
  --color-brand-900: #7a1f00;
  --color-brand-950: #3d0e00;

  /* Color simple sin escala */
  --color-accent: #e6286a;

  /* Colores semánticos */
  --color-surface:    #ffffff;
  --color-on-surface: #111827;
}

Ahora puedes usar bg-brand-500, text-brand-50, border-brand-700, text-accent, etc.

Integración con CSS custom properties

Una de las ventajas de @theme en v4 es que las variables también están disponibles como CSS custom properties, lo que permite usarlas en CSS personalizado:

@import "tailwindcss";

@theme {
  --color-brand: #ff530f;
  --color-accent: #e6286a;
}

/* Ahora puedes usarlas en CSS personalizado también */
.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--color-brand) 0%,
    var(--color-accent) 100%
  );
}

Construir un tema de marca completo

Este es un ejemplo de cómo definir un sistema de colores coherente para una aplicación:

@import "tailwindcss";

@theme {
  /* === Paleta de marca === */
  --color-ember-50:  #fff3ee;
  --color-ember-100: #ffe6d8;
  --color-ember-500: #ff530f;
  --color-ember-600: #e63d00;
  --color-ember-900: #7a1f00;

  --color-rose-brand: #e6286a;

  /* === Colores de superficie (modo claro) === */
  --color-bg-base:    #ffffff;
  --color-bg-subtle:  #f9fafb;
  --color-bg-muted:   #f3f4f6;

  /* === Texto (modo claro) === */
  --color-text-primary:   #111827;
  --color-text-secondary: #6b7280;
  --color-text-disabled:  #d1d5db;

  /* === Estados semánticos === */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error:   #dc2626;
  --color-info:    #2563eb;
}

Usar el tema en HTML:

<!-- Usando los colores de marca -->
<button
  class="bg-ember-500 hover:bg-ember-600 text-white
         focus-visible:ring-2 focus-visible:ring-ember-500/50
         px-6 py-3 rounded-xl font-semibold transition-colors"
>
  Empezar ahora
</button>

<!-- Badge de categoría -->
<span class="bg-ember-50 text-ember-600 border border-ember-200
             text-xs font-semibold px-3 py-1 rounded-full">
  Nuevo
</span>

<!-- Alerta de error -->
<div class="bg-error/10 border border-error/30 text-error
            rounded-xl px-4 py-3 flex items-start gap-3">
  <span class="text-error mt-0.5">⚠</span>
  <p class="text-sm">Ocurrió un error al procesar tu solicitud.</p>
</div>

Referencia de combinaciones de colores más usadas

Resumen

El sistema de colores de Tailwind combina una paleta de más de 20 familias con escala de 50-950, modificadores de opacidad con /, y un sistema de gradientes declarativo. Con @theme en v4, puedes definir tokens de color propios que se integran perfectamente con el sistema existente y quedan disponibles como variables CSS para todo el proyecto.