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! 🙏

[gabriel-mopereira]

That works, tks

[treago]

Faced similar issue.
In my case i needed to merge classes of multiple apps with classes of common ui components.

Generic solution:

import { extendTailwindMerge, getDefaultConfig } from "tailwind-merge";

// Match prefixes at the start of the line, after `:`, space or `-` (in case of a negative value)
const PREFIX_REGEX = /(?<=[-:\s]|^)(ui-|ct-)/g;

export const twMerge = extendTailwindMerge(() => {
  const config = getDefaultConfig();

  return {
    ...config,
    experimentalParseClassName: ({ className, ...params }) => {
      const parsedClassName = params.parseClassName(className);

      return {
        ...parsedClassName,
        baseClassName: parsedClassName.baseClassName.replace(PREFIX_REGEX, ""),
      };
    },
  };
});

Worth to mention.
I have custom class groups that used to work fine until I added experimentalParseClassName.
The issue occurred because it is required to spread default classGroups config if you want to add custom groups.

    ...
    classGroups: {
      ...config.classGroups,
      shadow: [{ shadow: ["round", "border", "borderFocus"] }],
    },
    ...