custom boxShadow being deleted from className when color is specified

[hexiro]

Hello!

When using a custom boxShadow defined in the tailwind config, twMerge will delete the shadow-[name] from the className without any other shadow overriding it if a custom color is specified. This could be an issue with my configuration. I'm using the out-the-box twMerge and don't know if I need to do anything to inform twMerge about my tailwind config.

Any help would be appreciated!

ex.

className={twMerge("shadow-custom shadow-red-500")}

emits shadow-red-500 as the final class name

[dcastil]

Hey @hexiro! 👋

tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately. The default out-of-the-box config of tailwind-merge assumes all unknown classes which could be a color (like shadow-custom) are a color, this is why it de-duplicated it when you use shadow-red-500 afterwards.

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: #274, #250, #207

[hexiro]

Ah, I see!

Since making this post I've learned about ring in tailwind which solved my issue in this example, but If I run into this issue again I'll be sure to try out configuring tailwind-merge.

Thank you for the response and thank you for making this package !!!