`leading-*` classes get removed when followed by `text-*` classes

[ApplePieGiraffe]

Describe the bug The following classes

const styles = tv({
  base: ["bg-red-500", "leading-none"]
});

...get applied to the element correctly

<button class="bg-red-500 leading-none">...</button>

But if I add a text-* class after the leading-* class

const styles = tv({
  base: ["bg-red-500", "leading-none", "text-md"]
});

...the "leading-none" class gets removed for some reason

<button class="bg-red-500 text-sm">...</button>

But it works fine if the leading-* class comes after the text-* class

const stylesC = tv({
  base: ["bg-red-500", "text-sm", "leading-none"]
});

<button class="bg-red-500 text-sm leading-none">...</button>

Idk if this is a niche thing because I've only observed this with leading-* classes but I've run into this a couple of times

To Reproduce See this Codesandbox. I've included an example of merging the same set of classes with tailwind-merge as I thought the issue might be there at first but it seems to be fine

Expected behavior The leading-* class should be applied to the element

[jrgarciadev]

@mskelton could you please take a look?

[mskelton]

@ApplePieGiraffe This behavior is intentional since text-sm and similar utilities add both font size and line height.

https://github.com/dcastil/tailwind-merge/issues/257#issuecomment-1600762499