Adding Custom Colors to tailwind.config.js

## Why it matters

Hard-coding bg-[#38bdf8] everywhere throws away the point of Tailwind: a shared vocabulary. Every time you write an arbitrary value, you are either repeating yourself or making a micro-decision about colour isolation. Register the colour once and the whole team writes bg-brand. It becomes searchable, consistent, and you can rebrand by changing one line.

Using extend adds your colours to Tailwind's built-in palette (slate, zinc, red, etc.). Drop extend only when you deliberately want to wipe the defaults, which is rare and breaks a lot of utility names.

## How it works

Add your palette under theme.extend.colors in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#38bdf8',
        surface: '#1a1a2e',
        accent: '#f59e0b'
      }
    }
  }
}
Copy

Each key becomes a utility class prefix. brand: '#38bdf8' generates:

• text-brand (text colour)
• bg-brand (background)
• border-brand (border colour)
• placeholder-brand (placeholder text)
• caret-brand (cursor colour)
• from-brand, via-brand, to-brand (gradient stops)
• And dozens more, depending on your Tailwind version.

For a richer palette with shades, nest the values:

brand: {
  50: '#f0f9ff',
  500: '#38bdf8',
  700: '#0369a1',
  900: '#0c3d66'
}
Copy

This generates text-brand-50, text-brand-500, and so on. The specific numbers (50, 500, 700) do not matter; use whatever naming makes sense for your palette.

## What does not matter

The colour values do not have to be hex. Tailwind accepts hex, rgb(), hsl(), oklch(), or even CSS variable names. Use whatever format you prefer. Also, do not worry about extending other utilities at the same time. Each section under theme.extend is independent.

Tailwind v4 moved to @theme in CSS files for colour definitions, which is more flexible for some projects. If you are on v3, stick with tailwind.config.js.

## Code example

A scanned palette from Scalpel Color exported straight into config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        twilight: {
          950: '#0a0e27',
          900: '#0c1840',
          800: '#0f2451',
          700: '#153f73',
          600: '#1a5a9c',
          500: '#2876c0',
          400: '#3fa3e8',
          300: '#6bbff8',
          200: '#a8d8fb',
          100: '#d4eafd'
        }
      }
    }
  }
}
Copy

Then in your HTML:

<button class="bg-twilight-600 text-twilight-50 hover:bg-twilight-700">
  Save
</button>
Copy

## How Scalpel Color shows it

The Palette tab has a "Tailwind" export. Click it to generate a complete colors config block ready to paste into theme.extend (or directly under theme if you want to replace Tailwind's defaults). The extension infers nesting based on the colour names; primary-500 becomes primary: { 500: '...' }.

---

## Related glossary

See css-custom-properties for CSS variable exports (a different approach to reusable colours), color-design-tokens for cross-platform token formats, and css-color-formats for the different ways to write colour values.