BUG Custom Box Shadow and Custom Box Shadow Color

[fahmiidris]

Hi everyone,

I'm facing an issue with custom box shadows and custom box shadow colors in my project. When I include both in the same className, it seems that the custom box shadow gets overridden or eliminated.

Has anyone encountered this issue before? Is there a way to use both custom box shadow and custom box shadow color without losing the box shadow?

Thanks in advance!

with tw-merge:

with no tw-merge:

my tailwind config:

boxShadow: {
    'no-blur-lowest': '1px 1px 0px 0px',
    'no-blur-low': '2px 2px 0px 0px',
    'no-blur-medium': '4px 4px 0px 0px',
    'no-blur-high': '8px 8px 0px 0px',
    'no-blur-highest': '16px 16px 0px 0px',},
boxShadowColor: {
    primary: 'hsl(var(--primary))',
},

[dcastil]

Hey @fahmiidris! 👋

tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately so it knows about the shadow-primary class. Color-related classes don't need to be configured though because tailwind-merge assumes that all unknown classes that could be a color class are in fact one.

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

You basically just need this:

import { extendTailwindMerge } from 'tailwind-merge'

export const twMerge = extendTailwindMerge({
    extend: {
        classGroups: {
            shadow: [{ 'shadow-no-blur': ['lowest', 'low', 'medium', 'high', 'highest'] }]
        }
    }
})

---

(For myself)

Related: #489, #488, #469, #447, #368, #322, #321, #315, #302, #276, #275, #274, #250, #207