text color getting overwritten when using custom font size

[rzec-allma]

Describe the bug

I have a custom font size of xxs however when I use that with a text color, the colors get overwritten even when using a custom merge.

To Reproduce

import { extendTailwindMerge } from 'tailwind-merge';

// not sure if this is configured correctly
const merge = extendTailwindMerge({ extend: { classGroups: { 'font-size': ['xxs'] } } });

console.log(merge('text-2xl text-red-500', 'text-xxs'));
// outputs `text-2xl text-xxs` instead of `text-red-500 text-xxs`

Expected behavior

Should output text-red-500 text-xxs

Environment

• tailwind-merge version: 2.3.0

[dcastil]

Hey @rzec-allma! 👋

You need to add the full class as a value in the config, then it should work correctly.

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': ['text-xxs'],
    },
  },
})

You can check it out here: https://codesandbox.io/p/sandbox/tailwind-merge-418-rm77n7?file=%2Fsrc%2Findex.ts%3A13%2C1-19%2C4

[rzec-allma]

Make sense, that does work, thanks.

[ozguruysal]

@dcastil, I have the same issue and your suggestion solves my problem but curious why wouldn't this work? I have font size classes text-label-sm, text-label-md and even more.

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [(classPart: string) => /^text-label-*/.test(classPart)],
    },
  },
})

[dcastil]

Hey @ozguruysal! 👋

ah yeah, that's a limitation of tailwind-merge. tailwind-merge works best when you keep as much of the class as possible static and conversely often doesn't work when you consume the entire class with a validator (the function with the regex).

You can change your code to this to make it work:

import { extendTailwindMerge, validators } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [{ "text-label": [validatos.isAny] }],
    },
  },
})

I added the issue #419 to explain this topic in more detail in the docs.

[ozguruysal]

@dcastil sorry about late respond. Thank you very much, that works. 👍