[v4] Color defined in custom property not changed in dark mode

[AmProsius]

Use case:

For theming, I use semantic CSS variables like primary, secondary etc. They are defined in the base layer like this:

@layer base {
  :root {
    --primary: var(--color-blue-500);
    /* ... */
  }

  .dark {
    --primary: var(--color-blue-700);
    /* ... */
  }
}

To make them available for utility classes, I add them to my theme:

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

My dark mode is invoked via class:

@custom-variant dark (&:where(.dark, .dark *));

It all works fine as long as I use the generated utility classes. For example:

<!-- Works fine ✅ -->

<div>
  <button type="button" class="text-primary">I am blue-500</button>
</div>

<div class="dark">
  <button type="button" class="text-primary">I am blue-700</button>
</div>

However, if I use my CSS variable directly, the color doesn't change correctly.

<!-- Doesn't work. Actual color is blue-500 ❌ -->

<div class="dark">
  <div class="[--btn-color:var(--color-primary)]">
    <button type="button" class="text-(--btn-color)">I am blue-700</button>
  </div>
</div>

Tailwind Play available.

Can anyone point me in the right direction how I can make the color change when using the CSS variable directly?

[wongjn]

You'd use --primary directly, or if you really wanted to use the --color-primary token, you'd use --theme() instead of var(): https://play.tailwindcss.com/tsJImH3vo8