Overriding colors from custom scale

[axyz]

Hi, I'm probably doing something wrong. I'm trying to use color-* instead of text-* to avoid the conflict when using a custom scale, but I still get 2 different colors in the final class list.

here is my config and debug logs:

const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      colors: [
        "primary",
        "inverse",
      ],
    },
  },
});

export function cn(...inputs: ClassValue[]) {
  console.log(">", inputs);
  console.log(">>", clsx(inputs));
  console.log(">>>", twMerge(clsx(inputs)));
  return twMerge(clsx(inputs));
}

in console I see:

> (3) ['text-body color-primary web:select-text', 'active:color-pressed web:hover:color-hover web:foc…s color-inverse text-body web:pointer-events-none', undefined]0: "text-body color-primary web:select-text"1: "active:color-pressed web:hover:color-hover web:focus-visible:color-focus color-inverse text-body web:pointer-events-none"2: undefined

 >> text-body color-primary web:select-text active:color-pressed web:hover:color-hover web:focus-visible:color-focus color-inverse text-body web:pointer-events-none

 >>> color-primary web:select-text active:color-pressed web:hover:color-hover web:focus-visible:color-focus color-inverse text-body web:pointer-events-none

considering that color-inverse appears after color-primary in the clsx output, I would expect color-primary to be removed from the list, but instead they both appear causing a conflict.

[dcastil]

Hey @axyz! 👋

There are a few issues here.

In Tailwind the text color classes start with text-* instead of color-*, so tailwind-merge treats color-primary as an external class and won't merge it.

I guess text-body is a font-size class that you have configured in your tailwind.config.js. You'll need to tell tailwind-merge about it so that it recognizes it. Otherwise tailwind-merge thinks it's a color class and merges it with other color classes.

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

You don't actually need to configure colors, tailwind-merge treats all classes that aren't recognized as anything else and that could be colors as color classes by default.