Using Tailwind CSS Color Tokens

Tailwind CSS provides a default palette of colours, but for branded projects you’ll want custom tokens. You can define colours in your tailwind.config.js under the theme.colors section. For example:

// 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'
        }
      }
    }
  }
}

To generate colour scales like this automatically, start with a base colour and use our Color Palette Extractor or Design Token Converter. They can output Tailwind‑ready tokens for you.