can't resolve family-name and font-weight when using arbitrary values, last one wins

[bguggie]

How does one resolve the conflict between font-family and font-weight with arbitrary values?

EX:
twMerge('font-(family-name:--custom-family) font-(--custom-weight)')
-> returns: font-(--custom-weight) expected: font-(family-name:--custom-family) font-(--custom-weight)
twMerge('font-(--custom-weight) font-(family-name:--custom-family)')
-> returns font-(family-name:--custom-family) expected: font-(--custom-weight) font-(family-name:--custom-family)

I am assuming this needs a custom tailwind-merge config but I can't get it to work. Any help is appreciated.

UPDATE: original post had incorrectly included font-family as type label for disambiguation but the issue actually still happens with the correct family-name. above example has been updated accordingly

[dcastil]

Hey @bguggie! 👋

I think the reason is that the label you're using is incorrect. It should be family-name instead of font-family (see docs). Can you try it with the new label?

[bguggie]

sorry, your are correct but unfortunately that was just a typo in my post. I have actually been using family-name and am seeing this issue.

I have updated the post to reflect his

[dcastil]

Just checked and you're right, this is a bug, I'll fix it.

This one is not easy to resolve due to how tailwind-merge works internally and it will take some time for me to find a way to fix it. As a workaround you can use the important modifier on one of the classes to make sure both stay in the output, e.g. font-(family-name:--custom-family) font-(--custom-weight)!.

[dcastil]

Tracking the bug in #588.

[bguggie]

thanks