wrong merge - Githubissues

kratess commented 3 weeks ago

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 2 weeks ago

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
})

kratess commented 2 weeks ago

Hi @dcastil

Indeed only native font-size of tailwind has the line-height set. Custom-ones i made does not have that feature.

But yeah, conflictingClassGroups solved my issue. Thanks

dcastil / tailwind-merge

wrong merge #482

Describe the bug

To Reproduce

Expected behavior