Colors and Theming

Colors and Theming

Tailwind CSS ships with an extensive, carefully crafted color palette and a powerful @theme API that lets you build complete brand color systems. Understanding how colors, opacity modifiers, and the theming system work together is key to building consistent UIs.

The default Tailwind v4 color palette

Tailwind v4 includes a refreshed default palette with colors in shades from 50 (lightest) to 950 (darkest). Every color generates utility classes for background, text, border, ring, shadow, and more.

The full palette includes:

Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

<!-- Same color at different intensities -->
<div class="bg-indigo-50">Very light background</div>
<div class="bg-indigo-100">Light tint</div>
<div class="bg-indigo-200">Slightly deeper</div>
<div class="bg-indigo-500">Mid-range — good for icons</div>
<div class="bg-indigo-600">Deep — good for buttons</div>
<div class="bg-indigo-700">Darker — good for hover states</div>
<div class="bg-indigo-900">Very dark</div>
<div class="bg-indigo-950">Near black</div>

Color utilities

Every color works across all relevant properties:

<!-- Background -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-white">White</div>
<div class="bg-black">Black</div>
<div class="bg-transparent">Transparent</div>

<!-- Text -->
<p class="text-gray-900">Near black body text</p>
<p class="text-gray-500">Muted secondary text</p>
<p class="text-indigo-600">Brand-colored link</p>
<p class="text-white">White text on dark bg</p>

<!-- Border -->
<div class="border-2 border-indigo-500">Indigo border</div>
<div class="border border-gray-200">Subtle gray border</div>

<!-- Ring (focus outline) -->
<button class="focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2">
  Accessible button
</button>

<!-- Shadow color (v4) -->
<div class="shadow-lg shadow-indigo-500/20">Colored shadow</div>

Opacity modifier syntax

The /N suffix modifies the opacity of any color utility without affecting the element's overall opacity. This is new in v4 and uses color-mix():

<!-- Background opacity -->
<div class="bg-indigo-600/10">10% opacity background</div>
<div class="bg-indigo-600/20">20% opacity background — great for tinted backgrounds</div>
<div class="bg-indigo-600/50">50% opacity background</div>

<!-- Text opacity -->
<p class="text-gray-900/60">60% opacity text</p>

<!-- Border opacity -->
<div class="border border-indigo-500/30">30% opacity border</div>

<!-- Combining with arbitrary values -->
<div class="bg-[#6366f1]/15">Arbitrary hex color at 15% opacity</div>

This pattern is essential for creating "tinted" UI elements — a button with a very light background tinted to the brand color:

<span class="bg-indigo-500/10 text-indigo-700 text-sm font-medium px-3 py-1 rounded-full">
  Beta
</span>

Gradients

Tailwind provides a complete set of gradient utilities:

<!-- Linear gradients -->
<div class="bg-gradient-to-r from-indigo-500 to-purple-600">Left to right</div>
<div class="bg-gradient-to-br from-sky-400 to-blue-600">Diagonal</div>
<div class="bg-gradient-to-b from-white to-gray-100">Subtle top to bottom</div>

<!-- Three-color gradient with via -->
<div class="bg-gradient-to-r from-rose-500 via-fuchsia-500 to-indigo-500">
  Three-stop gradient
</div>

<!-- Custom gradient stops (v4) -->
<div class="bg-linear-to-r from-indigo-600 from-30% to-purple-600">
  Asymmetric gradient — indigo holds 30%, then fades
</div>

<!-- Gradient on text -->
<h1 class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent text-4xl font-black">
  Gradient text effect
</h1>

Building a brand color system with @theme

For real applications, you want a custom color system that reflects your brand. Define it once in @theme and all utilities are generated automatically:

@import "tailwindcss";

@theme {
  /* Primary brand palette */
  --color-primary-50:  #f0f3ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* Semantic aliases */
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  --color-muted: #64748b;
  --color-muted-bg: #f8fafc;

  /* Feedback colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}

This generates classes like bg-primary-500, text-primary-600, bg-background, text-foreground, and text-muted — a complete design system vocabulary.

Color in dark mode

Colors become especially powerful combined with the dark mode variant:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-gray-900 dark:text-white">Heading</h1>
  <p class="text-gray-600 dark:text-gray-400">Muted text adapts in dark mode.</p>
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
    A panel that adapts its surface color.
  </div>
</div>

Practice

1. Define a three-color brand palette (brand-500, brand-600, brand-700) in @theme and use all three shades in a button (base, hover, active states).
2. Build a status badge system: success, warning, error, and info badges using /10 opacity backgrounds and full-opacity text.
3. Create a "glassmorphism" card using bg-white/10 backdrop-blur-lg border border-white/20 on a gradient background.