[v4] Referenced CSS variables in a "prefixed context" don't include the prefix

[QuentinFrc]

What version of Tailwind CSS are you using?

4.0.5

What version of Node.js are you using?

v22.5.1

Reproduction url :

https://play.tailwindcss.com/Z6kqQK9vbr?size=540x720&file=css

Describe your issue:

Given this code:

@theme {
  --color-black: black;
  --color-background: var(--color-black);
}

When using this stylesheet and prefixed it like this :

@import "tailwindcss" prefix(ui);
@import './theme.css' prefix(ui);

The result is:

:root {
  --ui-color-black: black;
  --ui-color-background: var(--color-black); /* Should be `var(--ui-color-black);` */
}

Keep in mind that I can't know the prefix that will be used

[wongjn]

You can use theme() instead of var() which seems to take the prefix into account: https://play.tailwindcss.com/zjlCbKLAXb?size=540x720&file=css

[QuentinFrc]

Thanks for the tip, (since it is deprecated I will keep the issue open)

[philipp-spiess]

@QuentinFrc Thanks! Yeah agree that this is not nice. I'd also recommend using the --theme() function for now but it may be something we can improve. Still the GitHub issue tracker is for bugs and issues so I'm going to move this to a GitHub discussion. That said I do think we can improve the situation here by maybe adding a new --prefix() function or something like that. That's something we've been thinking of before already. 🤔 I'll keep you posted on any updates.