twMerge remove shadow color without reason

[viktorbonino]

Describe the bug

If you have both a shadow (shadow-lg for example) and a shadow color (shadow-red-500 for example) it removes the shadow color class even if it's not necessary.

[dcastil]

Hey @viktorbonino! 👋

Do you have a way to reproduce the issue you have? I just tried it out with https://codesandbox.io/s/tailwind-merge-playground-cssr35?file=/src/index.ts and

const mergeData: MergeData[] = [
    {
        args: ['shadow-lg shadow-red-500'],
    },
]

but the result was shadow-lg shadow-red-500 as expected.

[viktorbonino]

I have this problem using tailwind-variants (that uses twMerge under the hood) and i assumed it was a twMerge bug, because if i disable twMerge within tailwind-variants it works.
At this point it could be a tailwind-variants bug and if not, i'm not sure how to replicate it with twMerge only.

[dcastil]

Ah, then you need to pass the tailwind-merge config to tailwind-variants which then passes that config to tailwind-merge. Here is the place where you need to pass the tailwind-merge config: https://www.tailwind-variants.org/docs/api-reference#twmergeconfig

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v1.14.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/v1.14.0/docs/configuration.md#usage-with-custom-tailwind-config.

Related: #276, #275, #274, #250, #207

[fredericoo]

For some reason I’m also having this in my project using shadcn-ui. Im’ on "tailwind-merge": "^1.14.0" and using a custom shadow + colour, with no custom config on tailwind-merge

[tom-ads]

Having the same issue with version ^1.13.2. I have a custom shadow "focus-md": "0px 0px 0px 3px rgba(0, 0, 0, 0.3)" and when using shadow-focus-md shadow-grey-200 the custom shadow colour is being overridden. Removing the twMerge call works as expected.

[williamli]

@tom-ads I just figured this out.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        highlight: 'inset 1.5rem -0.75rem 0.5rem 0.1rem'
      },
    }
  }
}

I need to use extendTailwindMerge to tell tailwind-merge that I have added an extra shadow class because it doesn't support that key by default.

import { extendTailwindMerge } from 'tailwind-merge';

export default function Component({ className }: { className?: string }) {

  const twMerge = extendTailwindMerge({
    classGroups: {
      shadow: [{ shadow: ['highlight'] }]
    }
  })


  return <a href="#" className={twMerge("shadow-highlight shadow-red-500", className)}>Hello</a>

}

[G9000]

Does not seem to work on my end. For context i replace the colors not extending it.

[dcastil]

@G9000 you generally don't need to configure colors in tailwind-merge. tailwind-merge will detect all classes that look like color classes and are not known to tailwind-merge as color classes.

twMerge('text-my-custom-red text-xl text-another-custom-color') === 'text-xl text-another-custom-color'

[Sliov]

Same here with arbitrary values: shadow-[inset_0_1px_0,inset_0_-1px_0] shadow-[hsl(var(--border-primary))]

[dcastil]

@Sliov your case is indeed a bug. I created a new issue for it in #391 and am going to close this one to keep things organized.

For the others: In case your issue is not resolved yet, please let me know and I'll reopen this again.