Custom Colors

Tailwind's default color palette is extensive, but your project probably has its own brand colors. Adding custom colors to your config makes them available as full utility sets — background, text, border, and more.

Adding a custom color

Define your brand colors in the extend section of your config.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
      },
    },
  },
}
    

Using custom colors

Once defined, use them exactly like Tailwind's built-in colors.

<div class="bg-brand-500 text-white p-6">
  <h2 class="text-brand-100">Brand colored heading</h2>
  <p class="text-brand-200">Lighter brand text</p>
</div>

<button class="bg-brand-600 hover:bg-brand-700 text-white px-4 py-2 rounded">
  Brand button
</button>
    

Single custom color

If you don't need a full shade scale, define a single color.

colors: {
  'primary': '#6366f1',
  'secondary': '#ec4899',
}
    

<div class="bg-primary text-white">Simple custom color</div>
    

Opacity with custom colors

Custom colors work with Tailwind's opacity modifiers out of the box.

<div class="bg-primary/20">20% opacity background</div>
<div class="text-primary/75">75% opacity text</div>