[v4] How to reference other variables when using prefixes

[qaws7791]

I thought the prefix was used at compile time, so I thought I should use var(--text-lg), but it only worked with var(--ui-text-lg). Is this the intended behavior?

@import "tailwindcss" prefix(ui);

@theme {
  /* ... */
  --text-*: initial;
  --text-lg: 2rem;

  --text-title: var(--text-lg); // ⚠️ Not Working
  --text-title: var(--ui-text-lg); // ✅ It works
}

demo: https://play.tailwindcss.com/klXHd00bau?file=css
reference:

• https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option
• https://tailwindcss.com/docs/theme#referencing-other-variables

[Inventoris]

Hi @qaws7791!

Yes, that's right. If you use a prefix, you now have to add it manually to the classes first.

@import "tailwindcss" prefix(tw);

<h1 class="tw:text-2xl">Hi there</h1>

Here is an interactive example.