Merge function does not work with custom box shadow classes

Hello, thanks for this awesome package.

I noticed an issue with the twMerge function when using custom box shadow classes.

// Actual
twMerge('shadow-md shadow-lg shadow-light shadow-dark') // 'shadow-lg shadow-light shadow-dark'

// Expected 
twMerge('shadow-md shadow-lg shadow-light shadow-dark') // 'shadow-dark'

This works properly with the normal box shadow classes.

Perhaps I to make a custom tailwind merge function with the light and dark suffixes? Thanks.

[dcastil]

Hi @charkour! Indeed, if you’re using a custom Tailwind config, you need to use createTailwindMerge and create a config for it. You don’t need createTailwindMerge in all cases, but in this one yes.

Here is how to create it in v0.7.1:

import { createTailwindMerge } from 'tailwind-merge'

export const twMerge = createTailwindMerge((getConfig) => {
    const config = getConfig()

    config.classGroups.shadow.push({ shadow: ['light', 'dark'] })

    return config
})

In v0.8.0 which will be released soon you can do it a little cleaner:

import { createTailwindMerge, getDefaultConfig, mergeConfigs } from 'tailwind-merge'

export const twMerge = createTailwindMerge(() =>
    mergeConfigs(getDefaultConfig(), {
        classGroups: {
            shadow: [{ shadow: ['light', 'dark'] }],
        },
    })
)

If you’re wondering where that class group name shadow comes from, it is specified in the default config here. So far there is no straight forward way to figure out which property to access but to look into the source code.

Let me know if that helps.

[dcastil]

Moving this to discussions as this isn’t a bug in tailwind-merge.