Problem with @utility when --value() is used

[roxeteer]

Simplified, I have this in my CSS file:

:root {
  --rgb-bg-accent: 6, 64, 239;
}

@utility xyzzy-* {
  --xyzzy-value: --value(--rgb-bg- *);
  --xyzzy-opacity: calc(--modifier(integer) * 1%);
  --xyzzy-color: rgba(var(--xyzzy-value), var(--xyzzy-opacity, 100));
  background-image: linear-gradient(var(--xyzzy-color), var(--xyzzy-color));
}

I would then use it like this: <div class="xyzzy-accent"> or <div class="xyzzy-accent/50"> (or actually as a hover effect to create a translucent sheet on another background color, but that's not relevant here).

However, nothing happens and no classes are generated. I don't know how to debug this. I'm using Next.js and no errors are printed in the console.

Tailwind Play example: https://play.tailwindcss.com/G5LgpCF2je?file=css In Tailwind Play, I also have another utility that skips using --value() and accesses var(--rgb-bg-accent) directly, and that works just fine.

I'm using tailwindcss 4.1.12 in my project.

[wongjn]

You'd want to use @theme not :root. @theme registers the --rgb-bg-accent variable as a theme token such that xyzzy-accent et al. become class name candidates. https://play.tailwindcss.com/PLwlUgWXuI?file=css

[roxeteer]

Wow, simple as that! Thank you!

Debugging the utilities seems to be very difficult. Everything is just ignored if there's an issue.