CSS Custom Properties for Color Systems in Tailwind

CSS Custom Properties and Tailwind

CSS custom properties (also called CSS variables) let you define reusable values that can change at runtime. Tailwind can reference these variables, giving you the best of both worlds: utility-first workflow with dynamic color control.

Setting Up Color Variables

/* globals.css */
@layer base {
  :root {
    --clr-bg: #ffffff;
    --clr-text: #0f172a;
    --clr-primary: #3b82f6;
    --clr-primary-hover: #2563eb;
    --clr-border: #e2e8f0;
  }
}

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        bg: 'var(--clr-bg)',
        text: 'var(--clr-text)',
        primary: 'var(--clr-primary)',
        'primary-hover': 'var(--clr-primary-hover)',
        border: 'var(--clr-border)',
      }
    }
  }
};

Runtime Color Updates

// Change colors at runtime without rebuilding CSS
document.documentElement.style.setProperty('--clr-primary', '#8b5cf6');
document.documentElement.style.setProperty('--clr-primary-hover', '#7c3aed');

// All elements using bg-primary instantly update
// <button class="bg-primary hover:bg-primary-hover text-white">

Scoped Color Overrides

CSS custom properties inherit through the DOM. You can override colors for specific sections of the page without adding extra classes.

<!-- Hero section with custom primary -->  
<section style="--clr-primary: #ec4899; --clr-primary-hover: #db2777;">
  <button class="bg-primary hover:bg-primary-hover text-white px-6 py-3 rounded-lg">
    Pink button in this section only
  </button>
</section>