Open lorenzo-dallamuta opened 3 months ago
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
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'
}
}
})
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);
}
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.
Describe the bug If I extend the Tailwind config with a custom property name for
fontSize
and try to apply it throughtv
the class name is present in thetv
output only if there are no other class names referencing the same keyword. For example, if I have bothtext-white
andtext-component-sm
the output only containstext-white
instead oftext-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:
tailwind.config.ts
with some custom properties that may be applied to thetext
keyword (ex. extendfontSize
)tv
function that only selectstext-customVar
as a class name for thetext
keywordtv
returns the class in its output stringtv
function that selectstext-customVar
and a second one (ex. text-white) as a class name for thetext
keywordtv
only returns in its output string the class with the default property nameExpected behavior If I provide both
text-white
andtext-component-sm
totv
the output should containtext-white text-component-sm
.Screenshots
Desktop (please complete the following information):
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)