Class groups validator not behaving as expected

[AleksiKytola]

I'm trying to make a class group for any "shadow-" classes. In my case I have some shadows such as 'card' or 'none' defined, and everything works just fine if I use them as literals in the class group

const shadowClassGroup = [{ shadow: ["card", "none"] }];

export const customTwMerge = extendTailwindMerge({
  classGroups: {
    shadowClassGroup,
  },
});

However if I try to use the option of adding a validator function, it doesnt seem to do anything

const anyClassSuffix = (classPart: string) => true;
const shadowClassGroup = [{ shadow: [anyClassSuffix] }];

Doesn't remove either shadow-card or shadow-none from a classlist that has both. If I understood the documentation correctly this classgroup should match any "shadow-" classes now?

Not sure whether its a bug or I'm misusing it? I even tried adding a console.log into the anyClassSuffix function and I'm not seeing any logging happening in my console so I'm not sure if the validator is even being called

[dcastil]

Hey @AleksiKytola! 👋

Your code should be correct. I just tested this code below in which shadow-[4] gets printed in the console.

import { extendTailwindMerge } from 'tailwind-merge'

export const twMerge = extendTailwindMerge({
  classGroups: {
    shadowClassGroup: [{ shadow: [() => true] }],
  },
});

console.log(twMerge('shadow-lol shadow-2 shadow-fjjalsdua8sdadjkasdh-dasdasd-aw-d shadow-[4]'))

But be aware that you shouldn't use a catch-all validator for shadow- classes because that one is already used for shadow-color classes (check out the code here). If you do that, tailwind-merge will mistakenly merge box-shadow and shadow-color classes together, like shadow-card and shadow-blue-500.

I'd suggest to either keep using string literals or define a more narrow validator for shadows, like this one:

const isNotShadowColor = (value: string) => !/^[a-z]+-\d+(\/\d+)?$/i.test(value)

[AleksiKytola]

I must be missing something about how tailwind merge detects these overlapping classnames. Specifically 'shadow-none' seems to behave weirdly. Is it somehow different from the other shadow- classes?

I've got your setup from above.

  !/^[a-z]+-\d+(\/\d+)?$/i.test(value);
const shadowClassGroup = [{ shadow: [isNotShadowColor] }];
export const customTwMerge = extendTailwindMerge({
  classGroups: {
    shadowClassGroup,
  },
});

console.log(customTwMerge('foo', 'bar', 'shadow-card', 'shadow-none'));

foo bar shadow-card shadow-none

console.log(customTwMerge('foo', 'bar', 'shadow-card', 'shadow-none', 'shadow-foobar'));

foo bar shadow-none shadow-foobar

Its not removing the shadow-none in either case but in the latter it does know to override shadow-card with shadow-foobar. In fact, I belive its just the default class group implementation you've got under the hood merging shadow-card with shadow-foobar since it does this even if I dont have any classGroups of my own defined.

If I change the classlist to
[{ shadow: ['none', 'card', isNotShadowColor] }];

console.log(customTwMerge('foo', 'bar', 'shadow-card', 'shadow-none', 'shadow-foobar'));

foo bar shadow-none shadow-foobar

Only if I explicitly list all the classes as string instead of relying on the function it works
{ shadow: ['none', 'card', 'foobar', isNotShadowColor] }
console.log(customTwMerge('foo', 'bar', 'shadow-card', 'shadow-none', 'shadow-foobar'));

foo bar shadow-foobar

From what I understood just having a class group [{ shadow: [isNotShadowColor] }]; should merge anything and everything that starts with shadow- but is not a shadow color class like shadow-blue-500, etc?

[dcastil]

Oooh sorry I mixed it up! The problem is that shadowClassGroup is not the correct key of the shadow class group, it's actually shadow (check it out here: https://github.com/dcastil/tailwind-merge/blob/v1.6.2/src/lib/default-config.ts#L1066). My example only worked by accident.

shadow-none in your example didn't get removed because it is already defined in the default config and therefore correctly categorized as a shadow class. There is also this class group for shadow colors:

'shadow-color': [{ shadow: [() => true] }],

So all other shadow-* classes get identified by tailwind-merge as shadow-color classes (I do that so that custom color scales which are quite common work out of the box) and therefore get removed.

So the correct use case would look like this:

import { extendTailwindMerge } from https://github.com/dcastil/tailwind-merge

const isNotShadowColor = (value: string) => !/^[a-z]+-\d+(\/\d+)?$/i.test(value)

export const twMerge = extendTailwindMerge({
  classGroups: {
    shadow: [{ shadow: [isNotShadowColor] }],
  },
});

console.log(twMerge('shadow-lol shadow-2 shadow-fjjalsdua8sdadjkasdh-dasdasd-aw-d shadow-[4]'))