[v4] Best method to use CSS variables for multiple themes?

[Boston343]

What's the recommended method for using CSS variables for color theming? As a basic example, take the following CSS v4 config which does not work (which you can also see here https://play.tailwindcss.com/V8n8xj1DFD?file=css):

@import "tailwindcss";

@theme {
  --color-primary: var(--primary);
}

@layer base {
  :root {
    --primary: red;
  }

  .blue {
    --primary: blue;
  }
}

The goal is to have various classes which, when added to any element, change the variables and therefore the color styles of that element. However, the above does not work. I duplicated this in a non-tailwind project just using CSS layers and saw the same thing, which is super unfortunate as I was hoping it was specific to tailwind.

What happens is if you inspect, the text in this tailwind play https://play.tailwindcss.com/V8n8xj1DFD?file=css , you should see the variable --primary on the element does show it's blue. But the --color-primary variable appears to be using the value that's on the :root at all times. So if you were to add the blue class to the html element, which you can't in the playground but I tested in my own project, things work as expected.

The best solution I've come up with at this point is to override the --color-primary variable itself. So the CSS will instead look like https://play.tailwindcss.com/yOEsY950qB

@import "tailwindcss";

@theme {
  --color-primary: red;
}

@layer base {
  .blue {
    --color-primary: blue;
  }
}

Is there a better method out there or something I'm missing?

[wongjn]

Yes, you are missing the inline tag with @theme (#14095):

@import "tailwindcss";

@theme inline {
  --color-primary: var(--primary);
}

@layer base {
  :root {
    --primary: red;
  }

  .blue {
    --primary: blue;
  }
}

Your Play with this change.

Though, your second method would seem like it could work well too.

[Boston343]

By god thank you. I did not see this documented anywhere (nor do I really know what it's doing that makes it now work).

[wongjn]

Explanations of the inline tag:

• Add support for inline option when defining @theme values #14095
• [v4] Custom variables in `@theme` directive not work as expected #15122 (reply in thread)

[Boston343]

Fantastic, thank you.