Tailwind Colors

// Text
<p className="text-blue-500">Blue text</p>
<p className="text-red-600">Red text</p>
 
// Background
<div className="bg-emerald-100">Light emerald bg</div>
<div className="bg-slate-900">Dark slate bg</div>
 
// Border
<div className="border border-gray-300">Gray border</div>
 
// Ring
<button className="ring-2 ring-indigo-500">Indigo ring</button>
 
// Arbitrary opacity
<div className="bg-blue-500/50">50% opacity blue</div>
<div className="text-red-600/75">75% opacity red text</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    /* lightest - backgrounds */
slate-100   /* light backgrounds, hover states */
slate-200   /* borders, dividers */
slate-300   /* disabled text, placeholder */
slate-400   /* placeholder text */
slate-500   /* secondary text */
slate-600   /* body text (light mode) */
slate-700   /* headings (light mode) */
slate-800   /* dark backgrounds */
slate-900   /* darkest backgrounds */
slate-950   /* near-black */

// Black and white
<div className="bg-black text-white">Pure black/white</div>
 
// Transparent
<div className="bg-transparent">No background</div>
 
// Current color (inherits)
<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);
}

// Now available as utilities
<button className="bg-brand-500 hover:bg-brand-600 text-white">
  Custom Brand
</button>

@theme {
  /* Replace the default blue with your brand blue */
  --color-blue-500: oklch(0.55 0.22 260);
  --color-blue-600: oklch(0.48 0.20 260);
}

@theme {
  /* Remove colors you don't use to reduce cognitive load */
  --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">Saved!</span>
<span className="text-error">Failed to save</span>

// Linear gradient
<div className="bg-gradient-to-r from-blue-500 to-purple-500">
  Gradient
</div>
 
// Three-stop gradient
<div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
  Multi-stop
</div>
 
// Gradient text
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
  Gradient Heading
</h1>

// Background opacity
<div className="bg-blue-500/10">Very subtle blue bg</div>
<div className="bg-blue-500/25">Light blue bg</div>
<div className="bg-blue-500/50">Half opacity blue</div>
<div className="bg-blue-500/75">Mostly opaque blue</div>
 
// Border opacity
<div className="border border-red-500/50">Semi-transparent red border</div>
 
// Shadow with color
<div className="shadow-lg shadow-blue-500/25">Blue glow shadow</div>

// Type-safe color props with string literals
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;
}
 
// Note: dynamic class names must be safelisted or use style prop
// Tailwind can't detect `bg-${color}-500` at build time
function Badge({ color, children }: BadgeProps) {
  // Use a lookup map instead of template literals
  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>
  );
}