Issue with classes order

[jon301]

Hi Dany,
Thanks for this lib! ❤️

I've found an issue regarding classes order with twMerge , which does not give the same results with the same classes

  console.log(twMerge('leading-snug', 'leading-3'));
  // OK: leading-3

  console.log(twMerge('leading-snug', 'text-sm leading-3'));
  // OK: text-sm leading-3

  console.log(twMerge('leading-snug', 'leading-3 text-sm'));
  // KO: text-sm <--- leading-3 is missing

[dcastil]

Hey @jon301! That's intended because text-sm sets the line-height CSS property, overriding the line-height set by leading-3.

Here is the CSS of text-sm with the default Tailwind CSS config:

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

I actually also wondered whether people would expect the Tailwind font-size classes to override the line-height classes and looks like that this is indeed unclear. 🤔

If you modified your Tailwind config so that the font-size classes don't modify line-heights or if you want to change the tailwind-merge behavior, you'll need to use a custom tailwind-merge config. Here is the bit you'll need:

import { createTailwindMerge, getDefaultConfig } from 'tailwind-merge'

export const twMerge = createTailwindMerge(getDefaultConfig, (config) => ({
    ...config,
    conflictingClassGroups: {
        ...config.conflictingClassGroups,
        'font-size':
            config.conflictingClassGroups['font-size']?.filter((id) => id !== 'leading') || [],
    },
}))

Let me know whether that solves your issue!

[dcastil]

I'm closing this issue as I consider this resolved. Please let me know if your issue isn't resolved yet and I'll reopen it.

[jamesarosen]

I'm getting something similar with

twMerge(
  "tw-leading-[1.5rem] md:tw-leading-[2rem]",
  "tw-text-[1.1rem] md:tw-text-[1.2rem]",
)

In this case, tw-text-[1.1rem] definitely doesn't define a line-height, so it shouldn't eliminate tw-leading-[1.5rem].

Reversing the order fixes the problem:

twMerge(
  "tw-text-[1.1rem] md:tw-text-[1.2rem]",
  "tw-leading-[1.5rem] md:tw-leading-[2rem]",
)

My guess is that arbitrary-value classes should always have conflictingClassGroups: [] (but not exempt their own prefix; see #115).

[dcastil]

Ah yeah that's a tricky problem. With the current internal structure in tailwind-merge it is not possible to differentiate between classes with and without arbitrary value in the same group. So currently I can't fix this in the default config without a breaking change. But if you want to solve this for yourself, a quick fix would be to split arbitrary font-sizes into a separate group that isn't in conflict with the leading group.

const twMerge = createTailwindMerge(() => {
    const config = getDefaultConfig()

    return {
        ...config,
        classGroups: {
            ...config.classGroups,
            'font-size': [{ text: ['base', validators.isTshirtSize] }],
            'font-size-arbitrary': [{ text: [validators.isArbitraryLength] }],
        },
        conflictingClassGroups: {
            ...config.conflictingClassGroups,
            'font-size': ['leading', 'font-size-arbitrary'],
            'font-size-arbitrary': ['font-size'],
        }
    }
})