Font size and Font color merged into a single class

[facusolerobin]

Describe the bug

Using both classes into a single element, for example a "p" tag, get merged into one single class, specifically the last one in the string.

To Reproduce

CodeSandbox reproduction

I have this cva variant, with both classes in it, where text-body-1-mb is a custom token of 14px (40px in the codesandbox)

export const textVariants = cva(commonClassnames, {
  variants: {
    variant: {
      'body.1':
        'text-body-1-mb leading-body-1-mb text-blue-600 lg:text-body-1-dk lg:leading-body-1-dk',
    },
  },
  defaultVariants: {
    variant: 'body.1',
  },
});

then I use a custom component

<Text variant='body.1'>Test</Text>

The output it's a text color blue (correct), font size 16px (incorrect).

Expected behavior

The text should be both blue and be 14px (40px in codesandbox reproduction).

Environment

• tailwind-merge version: 3.2.0

Additional context

My configuration includes class-variance-authority, custom semantic tokens with custom values for font sizes

[facusolerobin]

UPDATE: this bug only happens with custom semantic tokens, it works properly with default tailwind values like text-4xl.

@theme { text-body-1-dk: 80px; }

twMerge('text-body-1-dk text-red-500') -> this breaks and renders text-red-500 twMerge('text-red-500 text-body-1-dk') -> this breaks and renders text-body-1-dk twMerge('text-red-500 text-4xl') -> this works and renders text-red-500 text-4xl

[Aslarex]

Holy shit i thought i was going crazy until i found this

[dcastil]

Hey @facusolerobin and @Aslarex! 👋

tailwind-merge doesn't have access to your Tailwind config and you'll need to configure it separately with extendTailwindMerge when you tweaked your Tailwind config file.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v3.3.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config

And here is the documentation on how the tailwind-merge configuration works: https://github.com/dcastil/tailwind-merge/blob/v3.3.0/docs/configuration.md#usage-with-custom-tailwind-config.

---

Related: https://github.com/dcastil/tailwind-merge/issues/574, https://github.com/dcastil/tailwind-merge/issues/561, https://github.com/dcastil/tailwind-merge/issues/544, https://github.com/dcastil/tailwind-merge/discussions/489, https://github.com/dcastil/tailwind-merge/issues/488, https://github.com/dcastil/tailwind-merge/issues/469, https://github.com/dcastil/tailwind-merge/issues/447, https://github.com/dcastil/tailwind-merge/issues/368, https://github.com/dcastil/tailwind-merge/discussions/322, https://github.com/dcastil/tailwind-merge/issues/321, https://github.com/dcastil/tailwind-merge/discussions/315, https://github.com/dcastil/tailwind-merge/issues/302, https://github.com/dcastil/tailwind-merge/issues/276, https://github.com/dcastil/tailwind-merge/discussions/275, https://github.com/dcastil/tailwind-merge/issues/274, https://github.com/dcastil/tailwind-merge/issues/250, https://github.com/dcastil/tailwind-merge/issues/207

[facusolerobin]

Thanks! All working now, not extending the tw-merge config was the problem 🫡