Custom Color Palette in Tailwind Config

Defining Custom Colors in Tailwind

The theme.extend.colors section of your Tailwind configuration is where you define brand-specific and project-specific colors that go beyond the default palette.

Basic Color Definition

At its simplest, you add a flat key-value pair:

colors: {
  "brand": "#1a73e8",
  "accent": "#ff6b35",
}

This gives you classes like bg-brand, text-accent, border-brand, etc.

Building a Shade Scale

For production projects you typically need multiple shades of each color. Tailwind expects a nested object with numeric keys:

colors: {
  brand: {
    50:  "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
    950: "#172554",
  },
}

Now you get classes like bg-brand-100, text-brand-700, and so on.

Using CSS Variables for Theming

A powerful pattern combines CSS custom properties with Tailwind colors:

colors: {
  primary: "var(--color-primary)",
  secondary: "var(--color-secondary)",
}

Then define the variable values in your CSS for light and dark themes.

Extend vs Override

Using theme.extend.colors adds your colors alongside the defaults (blue, red, green, etc.). Using theme.colors directly replaces the entire color palette -- only your defined colors will be available.