Merge non-prefixed with prefixed

[wyozi]

Hey!

I have a bit of a possibly weird usecase, where I'm mixing a design system package uikit with all kinds of Buttons and Spinners with a regular frontend package client. The uikit package uses prefix: 'tw-' due to compatibility reasons whereas client doesn't use prefix at all.

I would like to merge tailwind classes passed to uikit's Button from the client codebase, but there is a problem in that tailwind classes used by client don't have any prefix while tailwind classes used by uikit are all prefixed with tw-, hence breaking the merge process.

Is there any solution to this or would it require supporting multiple prefixes in merge configuration?

[dcastil]

Hey @wyozi! 👋

You can do that surprisingly easily! Basically you want to add a prefixed version of every classGroup to the classGroup. This should do the trick:

const twMerge = createTailwindMerge(() => {
  const config = getDefaultConfig()

  return {
    ...config,
    classGroups: Object.fromEntries(
      Object.entries(config.classGroups).map(([key, value]) => {
        return [key, [...value, { tw: value }]]
      })
    ),
  }
})

twMerge('block tw-inline text-blue-500 tw-text-red-500 tw-px-4 p-3')
// → returns 'tw-inline tw-text-red-500 p-3'