twMerge is missing config when using with tailwind prefixes

[vincaslt]

Description

When tailwind is configured to use prefixes (through Plate CLI setup), the classNames overrides through twMerge don't work, because tailwind-merge is not checking tailwind config, prefixes need to be manually configured. This means that auto-generated components like Heading won't work correctly:

const headingVariants = cva("", {
  variants: {
    variant: {
      h1: "st-tw-mt-[2em]", // Not overriden
	  // ...
    },
    isFirstBlock: {
      true: "st-tw-mt-0",
      false: "",
    },
  },
});

The st-tw-mt-[2em] class will not be overwritten, instead, both classes will be added.

// tailwind.config.js
module.exports = {
  prefix: "st-tw-",
}

I'm solving this for now by copy-pasting the code from @udecode/cn into my project and instead of default twMerge import, I'm using this:

const twMerge = extendTailwindMerge({
  prefix: "st-tw-",
});

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

Good catch, I guess the same bug should happen in https://github.com/shadcn-ui/ui

We'd need to generate and import that file when prefix is defined.