How to extend twMerge properly for font-weight and font-family

[mohamedGamalAbuGalala]

I made some overrides on tailwind

import { type Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontWeight: {
        max: "900",
      },
      screens: {
        laptop: "960px",
      },
      fontFamily: {
        montserrat: ["Montserrat", "sans-serif"],
      },
      colors: {
        accent: "#42A5F5",
      },
      lineHeight: {
        11: "2.75rem",
      },
      spacing: {},
      maxWidth: {
        default: "1512px",
      },
    },
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant("active_hocus", ["&:hover", "&:focus", "&:active"]);
    }),
  ],
} satisfies Config;

and I have been trying to write a custom twMerge to support these configs but with no solution.

I need this customTwMerge( "font-montserrat font-max" ) to output "font-montserrat font-max"

But it always return "font-max"

Also, twMerge( "max-w-2xl text-5xl uppercase leading-9 text-headings sm:text-6xl sm:leading-19", "leading-[84.4%] sm:leading-13 text-4xl" ) is outputing max-w-2xl uppercase text-headings sm:text-6xl sm:leading-13 text-4xl

[dcastil]

Hey @mohamedGamalAbuGalala! 👋

There is a guide for this here: https://github.com/dcastil/tailwind-merge/blob/v1.12.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config

For your specific Tailwind config this would be tailwind-merge config:

const twMerge = extendTailwindMerge({
    classGroups: {
        'font-weight': ['font-max'],
        // screens don't need to be configured in tailwind-merge
        // custom font families are supported out of the box and don't need to be configured
        // custom colors are supported out of the box and don't need to be configured
        // custom line heights with numerical values work out of the box
        'max-w': ['max-w-default']
    }
})

[mohamedGamalAbuGalala]

Thanks for the quick response and your effort 🙏🏼,

I followed the docs, but it's not very clear.
I implemented some config like yours but without font- or max-w-

const twMerge = extendTailwindMerge({
    classGroups: {
        'font-weight': ['max'],
        'max-w': ['default']
    }
})

But it didn't work out, please add your example in the docs or clarify it. 🙏🏼

Your config is working well with the custom config, but the other use case (which is not related to the custom config) is not working properly

twMerge( "max-w-2xl text-5xl uppercase leading-9 text-headings sm:text-6xl sm:leading-19", "leading-[84.4%] sm:leading-13 text-4xl" ) is outputing max-w-2xl uppercase text-headings sm:text-6xl sm:leading-13 text-4xl

I expect it to output max-w-2xl text-4xl uppercase leading-[84.4%] text-headings sm:text-6xl sm:leading-13 or something similar
It should have leading-[84.4%] but it's not.

sandbox link

[dcastil]

Ah yes, thanks for the explanation! Will try to make the docs easier to understand on that part.

Regarding the missing leading-[84.4%]: This is expected, but not so well known. text-4xl also defines a line-height which is why leading-[84.4%] is removed. If you don't want it to get removed, you need to define it after the text-4xl class. Check here for more info on that.

[mohamedGamalAbuGalala]

Thanks for clarifying this 🙏🏼

[brandonmcconnell]

@dcastil Although, if you do add it after, wouldn't that then remove the text-4xl class, without removing that conflict?

[dcastil]

@brandonmcconnell when a line-height class comes after a font-size class, the font-size class doesn't get removed because you still want to apply the font-size and only override the line-height.

If we would remove text-4xl then we would lose that font-size that wasn't overridden.

It's a bit confusing, but maybe it's easier to think about it when you replace text-4xl with px-3 and leading-[84.4%] with pr-4. In pr-4 px-3 we remove pr-4 (because we want to use -3 for the right padding as well) but in px-3 pr-4 we keep it (because we want to use -3 for left padding and -4 for right padding).