Ignore / exclusion class group

[AleksiKytola]

My project has some custom fontSizes specified in tailwind config. These get merged with text colors such as text-blue-900 or custom colors like text-primarytext.
twMerge("text-32 text-primarytext") outputs text-primarytext only

        48: ['48px', '64px'],
        40: ['40px', '48px'],
        32: ['32px', '40px'],
        26: ['26px', '32px'],
        24: ['24px', '32px'],
        20: ['20px', '24px'],
        18: ['18px', '24px'],
        16: ['16px', '24px'],
        14: ['14px', '16px'],
        12: ['12px', '16px'],
      }

I couldnt find any config to create some ignore rule for these so that tw-merge wouldnt merge them. Any ideas?

[dcastil]

Hey @AleksiKytola! 👋

You need to add those values into your tailwind-merge config like this:

const twMerge = extendTailwindMerge({
    classGroups: {
        'font-size': [{ text: [validators.isLength] }]
    }
})

Without this, only the default font-sizes scale consisting out of T-shirt sizes works.

[AleksiKytola]

Thanks. Is there a list of these class groups somewhere? I'm occasionally struggling to figure out what to use, since its not TS-typed either

[dcastil]

At the moment you can use the Tailwind config theme keys defined in https://github.com/dcastil/tailwind-merge/blob/v1.8.0/docs/configuration.md#theme. If the theme key you want to change is not present, you need to search for the right class group here: https://github.com/dcastil/tailwind-merge/blob/v1.8.0/src/lib/default-config.ts#L113.

Not ideal, I'm thinking of a better way to do this. The biggest constraint which prevents me from making this a better experience is bundle size.