Tailwind CSS Custom Colors with CSS Variables

Integrating CSS Variables with Tailwind CSS

Tailwind CSS supports referencing CSS custom properties inside its configuration. This approach gives you the runtime-swappable benefits of CSS variables while keeping the utility-class workflow.

Step 1 — Define the Variables

:root {
  --color-brand-50:  #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-200: #c7d2fe;
  --color-brand-300: #a5b4fc;
  --color-brand-400: #818cf8;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;
  --color-brand-800: #3730a3;
  --color-brand-900: #312e81;
  --color-brand-950: #1e1b4b;
}

Step 2 — Reference in tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          // ... through 950
        },
      },
    },
  },
};

Step 3 — Use Utility Classes

<button class="bg-brand-500 text-brand-50 hover:bg-brand-600">
  Click me
</button>

Theme Switching at Runtime

Because the actual color values live in CSS variables, switching themes only requires overriding the :root block — no rebuild needed. This is how popular component libraries like shadcn/ui handle theming.

Caveats

Tailwind's opacity modifier (e.g. bg-brand-500/50) does not work when the value is a plain hex via var(). To enable opacity modifiers, define your variables as raw HSL or RGB channels and reconstruct them in the config with hsl(var(--color-brand-500)).