leading classes are getting removed if applied in the middle

[ubaid-myalfred]

Describe the bug

Tailwind merge remove the leading classes if it is applied in the middle of the class. It is only working if I apply it on the end.

To Reproduce

Not working
className='text-[1.5rem]! leading-[1.75rem]! md:text-2xl lg:text-[1.625rem] xl:leading-[2.188rem]! xl:text-3xl! max-w-3xl! text-primary-headingDark80!'

Working
className='text-[1.5rem]! leading-[1.75rem]! md:text-2xl lg:text-[1.625rem] xl:text-3xl! max-w-3xl! text-primary-headingDark80! xl:leading-[2.188rem]!'

Expected behavior

Leading class should be applied but it keeps getting removed

Environment

Tailwindcss v4.1.4
tailwind merge v3.2.0

[dcastil]

Hey @ubaid-myalfred! 👋

Just tested it out in https://codesandbox.io/p/sandbox/spjzgc and the only class that gets removed is xl:leading-[2.188rem]!. Are you sure that the problem doesn't come from a different part of your codebase?

[kachkaev]

👋 @dcastil! I am able to reproduce this:
https://codesandbox.io/p/devbox/tailwind-merge-573-forked-plgj9r

If leading-* is placed before text-*, it gets deleted. It makes sense in theory if we use something like text-lg which comes with font size and leading. However, setting text-[length:12px] should not erase leading that precedes it.

Interestingly, eslint-plugin-better-tailwindcss places leading-[*] before text-[*] (schoero/eslint-plugin-better-tailwindcss#145). This is how I've discovered this bug.

[dcastil]

That's annoying that eslint-plugin-better-tailwindcss and tailwind-merge don't work well together. With arbitrary values like text-[length:12px] it indeed doesn't make sense.

This issue is unfortunately quite tricky to solve. It's in the same group with the default font-size classes which by default define a line-height and therefore need to override the leading-* classes. You can also write text-[length:12px]/4 which still defines a line-height. I'm not sure how a good solution would look like here in the default config.

However in your own config you can disable this conflict entirely, just keep in mind that any font-size classes will not override any line-height classes this way.

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/v3.3.1/src/lib/default-config.ts#L2249
            'font-size': []
        }
    },
    // … rest of your config
})

---

Related: #540, #503, #482, #446, #401, #257, #218, #187, #59