Colores de Tailwind

// Texto
<p className="text-blue-500">Texto azul</p>
<p className="text-red-600">Texto rojo</p>
 
// Fondo
<div className="bg-emerald-100">Fondo esmeralda claro</div>
<div className="bg-slate-900">Fondo pizarra oscuro</div>
 
// Borde
<div className="border border-gray-300">Borde gris</div>
 
// Ring
<button className="ring-2 ring-indigo-500">Ring índigo</button>
 
// Opacidad arbitraria
<div className="bg-blue-500/50">Azul al 50% de opacidad</div>
<div className="text-red-600/75">Texto rojo al 75% de opacidad</div>

export function ColorShowcase() {
  const colors = [
    { name: "red", class: "bg-red-500" },
    { name: "orange", class: "bg-orange-500" },
    { name: "amber", class: "bg-amber-500" },
    { name: "yellow", class: "bg-yellow-500" },
    { name: "lime", class: "bg-lime-500" },
    { name: "green", class: "bg-green-500" },
    { name: "emerald", class: "bg-emerald-500" },
    { name: "teal", class: "bg-teal-500" },
    { name: "cyan", class: "bg-cyan-500" },
    { name: "sky", class: "bg-sky-500" },
    { name: "blue", class: "bg-blue-500" },
    { name: "indigo", class: "bg-indigo-500" },
    { name: "violet", class: "bg-violet-500" },
    { name: "purple", class: "bg-purple-500" },
    { name: "fuchsia", class: "bg-fuchsia-500" },
    { name: "pink", class: "bg-pink-500" },
    { name: "rose", class: "bg-rose-500" },
  ];
 
  return (
    <div className="grid grid-cols-6 gap-2">
      {colors.map(({ name, class: cls }) => (
        <div key={name} className="text-center">
          <div className={`h-12 w-full rounded ${cls}`} />
          <span className="text-xs text-gray-600 mt-1">{name}</span>
        </div>
      ))}
    </div>
  );
}

/* slate */
slate-50    /* más claro — fondos */
slate-100   /* fondos claros, estados hover */
slate-200   /* bordes, divisores */
slate-300   /* texto deshabilitado, placeholder */
slate-400   /* texto placeholder */
slate-500   /* texto secundario */
slate-600   /* texto del cuerpo (modo claro) */
slate-700   /* encabezados (modo claro) */
slate-800   /* fondos oscuros */
slate-900   /* fondos más oscuros */
slate-950   /* casi negro */

// Negro y blanco
<div className="bg-black text-white">Negro/blanco puro</div>
 
// Transparente
<div className="bg-transparent">Sin fondo</div>
 
// Color actual (hereda)
<svg className="fill-current text-blue-500">...</svg>

/* app/globals.css */
@theme {
  --color-brand-50: oklch(0.98 0.02 250);
  --color-brand-100: oklch(0.95 0.04 250);
  --color-brand-200: oklch(0.90 0.08 250);
  --color-brand-300: oklch(0.82 0.12 250);
  --color-brand-400: oklch(0.72 0.16 250);
  --color-brand-500: oklch(0.60 0.20 250);
  --color-brand-600: oklch(0.50 0.18 250);
  --color-brand-700: oklch(0.42 0.15 250);
  --color-brand-800: oklch(0.35 0.12 250);
  --color-brand-900: oklch(0.28 0.10 250);
  --color-brand-950: oklch(0.18 0.07 250);
}

// Ahora disponibles como utilidades
<button className="bg-brand-500 hover:bg-brand-600 text-white">
  Marca personalizada
</button>

@theme {
  /* Reemplaza el azul predeterminado con el azul de tu marca */
  --color-blue-500: oklch(0.55 0.22 260);
  --color-blue-600: oklch(0.48 0.20 260);
}

@theme {
  /* Elimina colores que no uses para reducir la carga cognitiva */
  --color-lime-*: initial;
  --color-fuchsia-*: initial;
  --color-cyan-*: initial;
}

@theme {
  --color-success: var(--color-green-500);
  --color-warning: var(--color-amber-500);
  --color-error: var(--color-red-500);
  --color-info: var(--color-blue-500);
}

<span className="text-success">¡Guardado!</span>
<span className="text-error">Error al guardar</span>

// Degradado lineal
<div className="bg-gradient-to-r from-blue-500 to-purple-500">
  Degradado
</div>
 
// Degradado de tres paradas
<div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
  Multiparada
</div>
 
// Texto con degradado
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
  Encabezado con degradado
</h1>

// Opacidad de fondo
<div className="bg-blue-500/10">Fondo azul muy sutil</div>
<div className="bg-blue-500/25">Fondo azul claro</div>
<div className="bg-blue-500/50">Azul a media opacidad</div>
<div className="bg-blue-500/75">Azul casi opaco</div>
 
// Opacidad de borde
<div className="border border-red-500/50">Borde rojo semitransparente</div>
 
// Sombra con color
<div className="shadow-lg shadow-blue-500/25">Sombra con resplandor azul</div>

// Props de color type-safe con literales de cadena
type Color =
  | "red" | "orange" | "amber" | "yellow"
  | "lime" | "green" | "emerald" | "teal"
  | "cyan" | "sky" | "blue" | "indigo"
  | "violet" | "purple" | "fuchsia" | "pink" | "rose"
  | "slate" | "gray" | "zinc" | "neutral" | "stone";
 
type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 
interface BadgeProps {
  color: Color;
  children: React.ReactNode;
}
 
// Nota: los nombres de clase dinámicos deben estar en safelist o usar la prop style
// Tailwind no puede detectar `bg-${color}-500` en tiempo de compilación
function Badge({ color, children }: BadgeProps) {
  // Usa un mapa de búsqueda en lugar de literales de plantilla
  const colorMap: Record<Color, string> = {
    red: "bg-red-100 text-red-800",
    blue: "bg-blue-100 text-blue-800",
    green: "bg-green-100 text-green-800",
    // ... etc
  };
 
  return (
    <span className={`px-2 py-0.5 rounded text-sm ${colorMap[color]}`}>
      {children}
    </span>
  );
}