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

[da1z]

@dcastil hey. can tailwind-merge add prefix for me? so i use regular tailwind classes without prefix. something like this
twMerge('p-4 m-2') will output 'tw:p-4 tw:m-2'

[dcastil]

@da1z tailwind-merge can't do that right now. But you could add this behavior yourself, no need to add that to tailwind-merge.

import { twMerge as twMergeOriginal } from 'tailwind-merge'

function twMerge(...args) {
    return twMergeOriginal(...args).split(' ').map(c => c && 'tw:' + c).join(' ')
}