Supports merging tailwind classes with two or more prefixes

[unional]

I'm working on a MFE application and each MFE uses their own prefixes.
They share components among each others.

So when finally applying the tailwind classes to a component, they can contain classes with different prefixes.

So twMerge = createTailwindMerge({ prefix: 'x-' }) does not work.

We either need to somehow specify all possible prefixes (not really feasible, unless it is created by the host which may know every application loaded), or have a way to specify hasPrefix: true and the function will ignore the prefix automatically.

[dcastil]

Hey @unional! 👋

Prefixes can be any string, including strings that look like Tailwind CSS classes. Therefore hasPrefix: true would not be enough to be able to handle them. tailwind-merge would need to know which part is the prefix and which is not.

tailwind-merge can handle classes with multiple different prefixes (#296 (comment)), but for that you'd need to know all possible prefixes and using too many can cause runtime performance issues.

Is there a way you could figure out what is or isn't a prefix? E.g. could you imagine using a function to determine the prefix?

I'm thinking of something like this:

const twMerge = createTailwindMerge({
  prefix: (className: string) => {
    // return className without prefix
  }
})

[unional]

I think accepting a function like this is good enough, we can then enforce a policy that the prefix must take a certain form, e.g. [a-zA-Z0-9]-.

Like you said, knowing all possible prefixes is not a good idea.

[dcastil]

Alright, that makes sense. I added an issue about this to track this feature: #412