Extend config with new class name from plugin

[elbracht]

Hello,

I use the tailwind plugin tailwindcss-inner-border (https://github.com/kripod/tailwindcss-inner-border). With this, I can use tailwind classes like inner-border-red-500 to create an inset box-shadow from them.

Unfortunately, it does not work that twMerge() merges these classes.

const classes = twMerge('inner-border-red-50', 'inner-border-red-900')

console.log(classes) => 'inner-border-red-50 inner-border-red-900'

I hope someone can tell me how to extend the twMerge configuration to resolve these classes correctly.

[dcastil]

Hey @elbracht! 👋

tailwind-merge doesn't know about the custom classes from the Taiwlind plugin out of the box and you need to configure it separately so it knows about the classes like inner-border-red-500.

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.

---

For myself:

Related: #321, #315, #302, #276, #275, #274, #250, #207

[elbracht]

Do I have to add all colors (red, blue, …) and color values (100, 200, …) manually when adding a custom scale?

[dcastil]

Thanks for your patience @elbracht (have a packed week over here)!

The color classes available to tailwind-merge are configured in a way that they accept any values that don't belong to other classes, which makes their configuration a bit simpler.

E.g. I'd configure it like this:

import { extendTailwindMerge, validators } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    classGroups: {
        'inner-border-width': [{ 'inner-border': [/* my width values */] }],
        'inner-border-color': [{ 'inner-border': [validators.isAny] }]
    },
    // don't forget this since inner-border-width classes set a box-shadow
    conflictingClassGroups: {
        'inner-border-width': ['shadow', 'ring-w'],
        'ring-w': ['inner-border-width'],
        shadow: ['inner-border-width']
    },
})

By the way I didn't look too much into the plugin, but if you only use it to create inner borders, you can use vanilla Tailwind CSS. E.g. to create a inner border with 2px you can use ring-2 ring-inset from https://tailwindcss.com/docs/ring-width.

[elbracht]

Thank you very much for your support. With the example it works perfectly.

If I have understood everything correctly, the plugin combines all shadows into one box shadow. So I can use ring for the focus state and still display an inner border.

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-inner-border-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);

Is it correct that I can do without the conflictingClassGroups if the different shadows do not overwrite each other?

[dcastil]

Ahh got it. Yes, in case everything is combined, then you don't need to specify the conflictingClassGroups.