[v4] Some generated tailwind CSS variables are not prefixed.

[benjamin-andersen]

What version of Tailwind CSS are you using?

v4.0.14

What build tool (or framework if it abstracts the build tool) are you using?

Latest Tailwind Play

What version of Node.js are you using?

Latest Tailwind Play

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Tailwind Play: https://play.tailwindcss.com/SLkLs6VhC4?file=css

Describe your issue

When using a prefix, I expect every tailwind generated CSS variable to use this prefix. This does not seem to be the case for certain utility classes, and can cause existing CSS variables to override the tailwind generated CSS variables.

Example:
If I set the prefix to foo, foo:translate-y-[50px] will generate the following CSS:

.foo\:translate-y-\[50px\] {
  --tw-translate-y: 50px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

I expect foo:translate-y-[50px] to generate something like:

.foo\:translate-y-\[50px\] {
  --foo-translate-y: 50px;
  translate: var(--foo-translate-x) var(--foo-translate-y);
}