Automatically fill chosen prefix to classes

[mycroft-cesar]

I'm encountering class name conflicts between my private component library (built with Tailwind CSS) and the project that integrates it (also using Tailwind).

To resolve this, I'm considering manually or through a script, prefixing all class names within my component library. However, this would require consistently adding the prefix during future usage.

It would be awesome if tailwind-merge could accept Tailwind's original class names, extend the configuration with a chosen prefix, and then evaluate styles considering the newly prefixed classes. This would significantly streamline the process.

e.g:

// prefix tw-
tailwind-merge('p-2') // tw-p-2

[dcastil]

Hey @mycroft-cesar! 👋

Not sure what exactly your use case is. But tailwind-merge works with prefixes just fine, you only need to tell it about the prefix:

import { extendTailwindMerge} from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    prefix: 'tw-',
})

If you want to modify the string before or after tailwind-merge does its work, you can wrap the twMerge call with your own function: https://github.com/dcastil/tailwind-merge/blob/v2.2.2/docs/recipes.md#modifying-inputs-and-output-of-twmerge