CSS Variables and Design Tokens

CSS custom properties and Tailwind config work together. Define semantic tokens as CSS variables, reference them in config, and get utility classes that respond to runtime changes.

Define CSS variables

/* src/style.css */
@layer base {
  :root {
    --color-primary: 59 130 246;
    --color-surface: 255 255 255;
    --color-text:    17 24 39;
  }

  .dark {
    --color-surface: 17 24 39;
    --color-text:    249 250 251;
  }
}

Reference in config

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: "rgb(var(--color-primary) / <alpha-value>)",
        surface: "rgb(var(--color-surface) / <alpha-value>)",
      }
    }
  }
}

Usage

<div class="bg-surface text-text-base">
  <button class="bg-primary/90 text-white">Save</button>
</div>

The / <alpha-value> syntax tells Tailwind where to inject the opacity multiplier so classes like bg-primary/50 work correctly. Without it, opacity utilities generate invalid CSS.