::-webkit-scrollbar-* pseudo-elements can't access CSS variables in Tailwind utilities

[mustafa-soylemez]

I'm creating a @Utility in Tailwind CSS 4.0 to style scrollbars. While the scrollbar-color property works fine with CSS variables, using those same variables inside WebKit pseudo-elements like ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track leads to issues — the variables are not recognized at runtime.

Here's the utility code:

@utility scrollbar-color-* {
  @supports selector(::-webkit-scrollbar) {
    &::-webkit-scrollbar {
      background-color: --modifier(--color-*, [color]);
    }
    &::-webkit-scrollbar-track {
      background-color: --modifier(--color-*, [color]);
    }
    &::-webkit-scrollbar-thumb {
      background-color: --value(--color-*, [color]);
    }
  }

  @supports not selector(::-webkit-scrollbar) {
    scrollbar-color: --value(--color-*, [color]) --modifier(--color-*, [color]);
  }
}

The CSS variables like --color-black are defined globally in :root, and they work fine in regular CSS properties. But when the compiled class is used, WebKit pseudo-elements throw an error like: --color-black is not defined

And the background color is not applied. This seems to be a limitation in how pseudo-elements handle scoped variables in WebKit engines (e.g., Chrome, Safari). However, since Tailwind 4.0 now compiles utilities directly into CSS, it's unclear how or whether this can be mitigated.

Is there a way in Tailwind 4.0 to force the utility to inject literal color values (from the theme) instead of using CSS variables when targeting pseudo-elements?
Or perhaps introduce a directive or flag to resolve [value] into the literal color (e.g. #fafafc) specifically for pseudo-element contexts?