Color Usage

Define CSS Variables: Start by defining color variables for root and dark modes in your Base CSS file.

// globals.css
@layer base {
  :root {
    /* Colors */
    --background: 0deg 0% 100%;
    --foreground: 224deg 71% 4%;
    --card: 0deg 0% 100%;
    --card-foreground: 224deg 71% 4%;
    --popover: 0deg 0% 100%;
    --popover-foreground: 224deg 71% 4%;
    --primary: 8deg 82% 71%;
    --primary-foreground: 0deg 0% 100%;
    --secondary: 221deg 39% 11%;
    --secondary-foreground: 210deg 20% 98%;
    --muted: 220deg 14% 96%;
    --muted-foreground: 220deg 9% 20%;
    --footer: 220deg 14% 96%;
    --footer-foreground: 220deg 9% 20%;
    --accent: 220deg 1% 96%;
    --accent-foreground: 8deg 82% 71%;
    --destructive: 0deg 84% 60%;
    --destructive-foreground: 210deg 20% 98%;
    --border: 220deg 13% 91%;
    --input: 220deg 13% 91%;
    // ...addditional variables

  /* Dark Mode Overrides */
  .dark {
    --background: 210deg 20% 18%;
    --foreground: 0deg 0% 90%;
    --card: 210deg 15% 15%;
    --card-foreground: 0deg 0% 90%;
    --popover: 210deg 15% 15%;
    --popover-foreground: 0deg 0% 90%;
    --primary: 8deg 82% 61%;
    --primary-foreground: 0deg 0% 90%;
    --secondary: 221deg 39% 45%;
    --secondary-foreground: 0deg 0% 100%;
    --muted: 220deg 14% 30%;
    --muted-foreground: 220deg 9% 80%;
    --footer: 220deg 14% 30%;
    --footer-foreground: 220deg 9% 80%;
    --accent: 220deg 1% 30%;
    --accent-foreground: 221deg 39% 45%;
    --destructive: 0deg 84% 50%;
    --destructive-foreground: 0deg 0% 100%;
    // ...additional dark mode variables
  }
}

Reference in Tailwind Config: Extend Tailwind's default color palette to map your CSS variables to utility classes like bg-background and text-foreground.

See Tailwind Config for more information.

// tailwind.config.js
  theme: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        footer: {
          DEFAULT: 'hsl(var(--footer))',
          foreground: 'hsl(var(--footer-foreground))',
        },
      },
      // other variables

Configure for CMS Use: Content creators and designers can update the color variables in the CMS, enabling easy theme adjustments without code changes.

App Usage: Apply color variables to components using Tailwind classes.

<div className='bg-background text-foreground'>
  This text has the foreground color and the background color.
</div>

With this setup, color variables can be applied anywhere in the project using Tailwind classes. For example, bg-background and text-foreground can be used to set the background and text color of an element, and these colors can be updated in the CMS without changing the code.