Merging prefixed and non-prefixed classes with Tailwind v4

[djpsychofogbear]

Found a previous answer to this question in these threads:

• Optional prefix
• Merge non-prefixed with prefixed

const twMerge = extendTailwindMerge(config => {
  Object.keys(config.classGroups).forEach(key => {
    const value = config.classGroups[key] ?? []
    config.classGroups[key] = [...value, { "ui:": value }]
  })
  console.log("tailwind merge config", config)
  return config
})

This appears to be the solution i want - I have a monorepo with a ui package that uses a prefix and i want to be able to do ad-hoc overrides on the prefixed classes. But it doesn't seem to work with the prefix changes introduced in TW V4.

Is there a way to adapt this approach for v4 with the current implementation of twmerge?

[dcastil]

Hey @djpsychofogbear! 👋

Indeed, the syntax of prefixes changed to look like a modifier, so the old way won't work anymore. But you can use experimentalParseClassName to get what you want:

const twMerge = extendTailwindMerge({
    experimentalParseClassName({ className, parseClassName }) {
        return parseClassName(
            className.startsWith('ui:') ? className.substring(3) : className
        )
    }
})

That will make tailwind-merge treat classes with ui: at the beginning as if that part wasn't there while preserving the original className that was passed to tailwind-merge. Just keep in mind that the experimentalParseClassName function can have breaking changes in minor version updates.

[djpsychofogbear]

Sweet, this seems to do the trick. Thanks for the speedy reply! 🙏