wrong merge
Closed this issue · 2 comments
kratess commented
Describe the bug
To Reproduce
const textAreaVariants = cva(
"block bg-white text-gray1 leading-1.25 border-gray4 placeholder-opacity-50 border rounded-5 outline-none",
{
variants: {
componentSize: {
lg: "text-16",
md: "text-14",
sm: "text-12"
}
},
defaultVariants: {
componentSize: "md"
}
}
);
const _twMerge = extendTailwindMerge({
extend: {
classGroups: {
"text-color": [
{
text: [
"white",
"black",
"gray1",
"gray2",
"gray3",
"gray4",
"gray5",
"gray6",
"gray7",
"gray8",
"gray9",
"gold",
"red"
]
}
],
"font-size": [
{
text: [
"0",
"2",
"4",
"6",
"8",
"10",
"12",
"14",
"16",
"18",
"20",
"22",
"24",
"26",
"28",
"30",
"32",
"34",
"36",
"38",
"40",
"42",
"44",
"46",
"48",
"50",
"52",
"54",
"56",
"58",
"60",
"62",
"64",
"96",
"128"
]
}
],
"leading": [
{
text: ["1.0", "1.1", "1.2", "1.25", "1.3", "1.4", "1.5"]
}
]
}
}
});
results in this:
block bg-white text-gray1 border-gray4 placeholder-opacity-50 rounded-5 outline-none text-14 w-100 border-0
Expected behavior
block bg-white text-gray1 leading-1.25 border-gray4 placeholder-opacity-50 rounded-5 outline-none text-14 w-100 border-0
dcastil commented
Hey @kratess! 👋
The reason why the leading-1.25 class gets removed is because text-14 sets a line-height CSS property, overriding line-height classes if you place it afterwards. If you want to change this overriding behavior and don't use line-heights in your font-size classes, you can override the conflict between the font-size and line-height classes:
import { extendTailwindMerge } from 'tailwind-merge'
const twMerge = extendTailwindMerge({
override: {
conflictingClassGroups: {
// In the default config the value is ['leading']
// See https://github.com/dcastil/tailwind-merge/blob/v2.5.4/src/lib/default-config.ts#L1786
'font-size': []
}
},
// … rest of your config
})