Custom Tailwind theme variables are not applied if a different modifier is being applied to the same keyword (text-white + text-custom)

[lorenzo-dallamuta]

Describe the bug If I extend the Tailwind config with a custom property name for fontSize and try to apply it through tv the class name is present in the tv output only if there are no other class names referencing the same keyword. For example, if I have both text-white and text-component-sm the output only contains text-white instead of text-white text-component-sm.

Note, that with the last version of CVA the output is as I was expecting it.

To Reproduce I created an example stackblitz to demo the issue: https://stackblitz.com/edit/stackblitz-starters-k5mnqu?file=app%2Fpage.tsx

Steps to reproduce the behavior:

1. extend tailwind.config.ts with some custom properties that may be applied to the text keyword (ex. extend fontSize)
2. create a tv function that only selects text-customVar as a class name for the text keyword
3. tv returns the class in its output string
4. create a tv function that selects text-customVar and a second one (ex. text-white) as a class name for the text keyword
5. tv only returns in its output string the class with the default property name

Expected behavior If I provide both text-white and text-component-sm to tv the output should contain text-white text-component-sm.

Screenshots

Desktop (please complete the following information):

• Windows 11
• Chrome 125

Smartphone (please complete the following information): untested

Additional context this is an issue that applies to the node environment as well (for example through Next.js)