Allow getting the raw value of a CSS variable when creating custom utilities

[babakfp]

What version of Tailwind CSS are you using?

v4.0.17

Reproduction URL

https://play.tailwindcss.com/zRMgL8AdRl?file=css

Describe your issue

These two plugins that worked for Tailwind CSS 3, they no longer work for in version 4 of Tailwind CSS. Because it seems like CSS variables don't work inside url("").

https://www.npmjs.com/package/tailwind-heropatterns
https://www.npmjs.com/package/tailwindcss-hero-patterns

There may be other scenarios like this that I'm not aware of.

So, without this issue being resolved, creating custom plugins like mentioned above, won't be possible in Tailwind CSS 4.

[philipp-spiess]

Hey there! Yeah CSS variables don't work inside strings in CSS, there is in fact no way to construct strings at runtime at all so what you're trying to build can't really be done in CSS only right now I'm afraid. There's open discussion about a feature like this in the csswg-drafts issues. I do agree though that this might be useful to add to the @utility APIs to make them more powerful.

I recommend for now that you use the JavaScript plugin API to get the behavior you want.

[philipp-spiess]

You can use the theme(…) function exposed to the JS plugin to get the raw value of that variable or am I mistaken here?

[babakfp]

I've tried, but it doesn't work, meaning it returns var(--color-...).

[wongjn]

Could you provide a git repo that reproduces your behavior please? I've just test it and it seems to return the raw color value for me.

[babakfp]

Found the issue:

@theme inline {
  --color-gray-50: var(--color-neutral-50);
}

Output:

.bg-pattern-gray-50 {
  --pattern: var(--color-neutral-50);
}
.bg-pattern-red-50 {
  --pattern: oklch(0.971 0.013 17.38);
}

Reproduction:

https://github.com/babakfp/tailwindcss-get-color-raw-value

Check the branch called simple.

[wongjn]

Yep, so the "raw" value of --color-gray-50 is var(--color-neutral-50). I would presume then that Tailwind sees var(--color-neutral-50) as a "plain" CSS value and doesn't treat it as a special theme token to traverse the theme configuration again.