font-[inherit] should override font-bold (or any other weight)

[hmaesta]

tailwind-merge 2.5.5 doesn't correctly override font-weight for inherit as an arbitrary value.

Expected

• twMerge('font-bold', 'font-[inherit]') should result in font-[inherit]

• font-[inherit] should override all Tailwind CSS font weights.

To Reproduce

• Test case: https://codesandbox.io/p/sandbox/h677kg
• Real-life example: https://codesandbox.io/p/sandbox/cxhzdt

[dcastil]

Hey @hmaesta! 👋

tailwind-merge recognizes font-[inherit] as a font-family class because that's also what Tailwind CSS generates for that class: font-family: inherit. In Tailwind CSS the only way to set the CSS you want is to use arbitrary properties: [font-weight:inherit]. But that won't help with tailwind-merge since it won't override arbitrary properties with default classes.

This is really quite tricky. 🤔 I'm afraid there is no solution for this within tailwind-merge.

Looking at your real-life example, a workaround could be to add a prop like noFontWeight to the Button component and not set the font-normal class when that prop is true. Then the button will inherit the font-weight by default.

function Button({ children, className, style, noFontWeight }) {
  return (
    <div
      className={twMerge("text-green-600", !noFontWeight && "font-normal", className)}
      style={style}
    >
      {children}
    </div>
  );
}

[hmaesta]

Ooof, I forgot that Tailwind CSS uses the font- prefix for both font-family and font-weight 😞

That makes sense.

Thanks for the answer, Dany.

[dcastil]

No worries. 😊 I'll close this issue for now. Let me know if this isn't resolved for you and I'll reopen.