Semantic variable references don't work without @theme inline?

[bengry]

(I'm not entirely sure this is a bug, so asking here before opening an issue.)

In my current TW3 setup, I have a custom plugin that mimics Imba's hue utility (a similar implementation is also available for UnoCSS in this Radix preset).

I'm trying to convert it to TW4 with a CSS config, which looks something like this (playground link). This is an abbreviated version, the real one has a .hue-{color} class for every color in the palette (e.g. .hue-red) + every semantic color mapping (e.g. .hue-danger):

@import "tailwindcss";

@theme {
  /* Remove all Tailwind's default colors */
  --color-*: initial;

  /* ============================================
   * Purple
   * ============================================ */
  --color-purple-1: light-dark(hsl(280 65% 99.4%), hsl(284 20% 9.6%));
  ...
  --color-purple-12: light-dark(hsl(272 66% 16%), hsl(279 75% 95.7%));
}

@theme {
  /* Semantic color mapping highlight → purple */
  --color-highlight-1: var(--color-purple-1);
  ...
  --color-highlight-12: var(--color-purple-12);
}

@utility hue-highlight {
  --current-hue-1: var(--color-highlight-1);
  ...
  --current-hue-12: var(--color-highlight-12);
}

/* Semantic background aliases - e.g., bg-current-hue-app, bg-current-hue-solid */
@theme {
  --background-color-current-hue-app: var(--current-hue-1);
  --background-color-current-hue-element: var(--current-hue-3);
  ...
  --background-color-current-hue-solid-active: var(--current-hue-11);
}

This should work with this HTML:

<div class="bg-current-hue-element hue-highlight size-10"></div>

Almost everything works, but this CSS declaration doesn't work:

.bg-current-hue-element {
    background-color: var(--background-color-current-hue-element);
}

because nothing registers the --background-color-current-hue-element CSS variable (I expected my last @theme declaration to do so, second line there).
If I change:

@theme inline {
  --background-color-current-hue-element: var(--current-hue-3);
  ...
}

it works, but then I lose the --background-color-current-hue-element variable, which I want for other purposes (e.g. easy JS-based reference). I can also register it myself on :root, but that means duplicated code, which I'm not loving.

Am I doing something wrong? Is this a bug in TW4? Is there a cleaner way to make this work?

[wongjn]

Add the static keyword to force the CSS variables to be output in the :root, :host rule: https://play.tailwindcss.com/vgYLloMSXd?file=css

[bengry]

Thanks for the quick response! inline alone works as I mentioned in the original post, so there's no need for static. Your example is valid, but it includes both inline and static. I want to avoid using inline, as removing it breaks the example.

[wongjn]

Why don't you want inline? You need it or otherwise your system doesn't work, as you've found out. It's intrinsic to ensuring your CSS variables system works.

[bengry]

Why don't you want inline? You need it or otherwise your system doesn't work, as you've found out. It's intrinsic to ensuring your CSS variables system works.

Because:

then I lose the --background-color-current-hue-element variable, which I want for other purposes (e.g. easy JS-based reference)

[wongjn]

Workaround while removing inline would be to copy-paste the --background-color-* definitions inside the hue-highlight utility. Though, you may not like the duplicated code.