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)

[JoseGalRe]

I have this issue too, custom properties are being ignored when tv transform

i create a mini repo with the reproducible issue
https://github.com/JoseGalRe/tailwind-variants-bug-example

[velin-deity]

Same problem here. It happens across variants as well

const textSizeVariants = tv({
  base: 'font-medium',
  variants: {
    usage: {
      label: 'text-text-neutral-strong-normal',
      hint: 'text-text-neutral-muted-normal'
    },
    size: {
      sm: 'text-fontSize-0',
      md: 'text-fontSize-1',
      lg: 'text-fontSize-2'
    }
  }
})

[Geoffrey-DW]

The issue stems from TwMerge. You need to customize the TwMerge configuration (shadcn had the same issue with his cn() function).

I am trying to do something similar for tv() but without success so far

const customTv = createTV({
   twMergeConfig: customTwMergeConfig, // build with extendTailwindMerge()
});

export function ctv(classes) {
   return customTv(classes);
}

[thefalked]

I had the same issue, text-white was being replace for text-xxs, but like the previous comment the issue is the TwMerge which is used under the hood but you can customize like this:

import { createTV, VariantProps } from 'tailwind-variants';

export const twMergeConfig = {
    extend: {
        classGroups: {
            'font-size': [{ text: ['xxs'] }],
        },
    },
};

export type { VariantProps };

export const tv = createTV({
    twMergeConfig,
});

The only issue is that i find the documentation of TwMerge really awful to understand, but with my example you have a better start then me.

[almarzn]

I found the issue for my particular case: I had to make sure tailwind-variants was deduped with nextui's, so that the same configuration is applied to both:

Before:

└─┬ @repo/[email protected] -> ./apps/front
  ├─┬ @nextui-org/[email protected]
  │ └─┬ @nextui-org/[email protected]
  │   └── [email protected]
  └── [email protected]

After:

└─┬ @repo/[email protected] -> ./apps/front
  ├─┬ @nextui-org/[email protected]
  │ └─┬ @nextui-org/[email protected]
  │   └── [email protected] deduped
  └── [email protected]