Optional prefix

[dorshinar]

Hi :)
I'd like to ask for a way to set optional prefixes so that they will be collectively merged, like so:

twMerge('tw-text-slate-100 yo-text-slate-100 text-slate-200') === 'text-slate-200'

We have a component library that is prefixed to avoid clashes with applications consuming it, which in turn may or may not have a prefix defined.
So let's say our <Button /> component uses a tw- prefix, but the application that consumes it uses ap-. We'd like our <Button /> to be conposable in a way that allows passing classNames that override the built-in one where it makes sense.

[dcastil]

Hey @dorshinar! 👋

You can do that already! It's not very pretty, but it does what you want:

const twMerge = extendTailwindMerge((config) => {
    Object.keys(config.classGroups).forEach((key) => {
        const value = config.classGroups[key]
        config.classGroups[key] = [...value, { tw: value, yo: value }]
    })

    return config
})

twMerge('tw-text-slate-100 yo-text-slate-100 text-slate-200')
// → 'text-slate-200'

But keep in mind that every prefix you use makes the internal data structure tailwind-merge computes exponentially bigger and might make the first call to twMerge slower (subsequent calls don't get slower). You can see in this line

config.classGroups[key] = [...value, { tw: value, yo: value }]

that we're making each class group essentially three times bigger. I think for one or two prefixes that doesn't matter, but if you're thinking about more, I'd check the tailwind-merge performance for that.

---

Related: #162

[dorshinar]

Thanks for the quick reply!
I'll give it a shot and update here