cant resolve my custom prefixed ui:bg-black/6 with bg-black/3

[mcdhage98]

Hi,

Im using prefixed tailwind classes.
This is my one of the component

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "ui:fixed ui:inset-0 ui:z-50 ui:bg-black/60 ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out data-[state=closed]:ui-fade-out-0 data-[state=open]:ui-fade-in-0",
      className
    )}
    {...props}
  />
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

Im trying to import it in one of my projects and override bg using unprefixed bg-black/30.
But im still getting ui:bg-black/60.

<DialogOverlay className=" bg-black/10" />

Below is my custom twMerge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

const twMerge = extendTailwindMerge({
  experimentalParseClassName({ className, parseClassName }) {
    return parseClassName(
      className.startsWith("ui:") ? className.substring(3) : className
    );
  },
  // We're using `extend` because we want to add a value and not override an entire group
  extend: {
    theme: {},
    classGroups: {
      "font-size": [
        {
          text: [
            "body-xs",
            "body-sm",
            "body-md",
            "body-lg",
            "heading-sm",
            "heading-md",
            "heading-lg",
            "label-sm",
            "label-md",
            "label-lg",
          ],
        },
      ],
      "text-color": [
        {
          text: [
            // Primary
            "primary",
            "primary-50",
            "primary-100",
            "primary-200",
            "primary-300",
            "primary-400",
            "primary-500",
            "primary-600",
            "primary-700",
            "primary-800",

            // Greens
            "arn-green-50",
            "arn-green-100",
            "arn-green-200",
            "arn-green-300",
            "arn-green-400",
            "arn-green-500",
            "arn-green-600",
            "arn-green-700",
            "arn-green-800",
            "arn-green-900",

            // Oranges
            "arn-orange-50",
            "arn-orange-100",
            "arn-orange-200",
            "arn-orange-300",
            "arn-orange-400",
            "arn-orange-500",
            "arn-orange-600",
            "arn-orange-700",
            "arn-orange-800",

            // Reds
            "arn-red-50",
            "arn-red-100",
            "arn-red-200",
            "arn-red-300",
            "arn-red-400",
            "arn-red-500",
            "arn-red-600",
            "arn-red-700",
            "arn-red-800",

            // Yellows
            "arn-yellow-50",
            "arn-yellow-100",
            "arn-yellow-200",
            "arn-yellow-300",
            "arn-yellow-400",
            "arn-yellow-500",
            "arn-yellow-600",
            "arn-yellow-700",
            "arn-yellow-800",

            // Sea blues
            "arn-sea-blue-50",
            "arn-sea-blue-100",
            "arn-sea-blue-200",
            "arn-sea-blue-300",
            "arn-sea-blue-400",
            "arn-sea-blue-500",
            "arn-sea-blue-600",
            "arn-sea-blue-700",
            "arn-sea-blue-800",

            // Purples
            "arn-purple-50",
            "arn-purple-100",
            "arn-purple-200",
            "arn-purple-300",
            "arn-purple-400",
            "arn-purple-500",
            "arn-purple-600",
            "arn-purple-700",
            "arn-purple-800",

            // Pinks
            "arn-pink-50",
            "arn-pink-100",
            "arn-pink-200",
            "arn-pink-300",
            "arn-pink-400",
            "arn-pink-500",
            "arn-pink-600",
            "arn-pink-700",
            "arn-pink-800",

            // Greys
            "grey-50",
            "grey-100",
            "grey-200",
            "grey-300",
            "grey-400",
            "grey-500",
            "grey-600",
            "grey-700",
            "grey-800",

            // Semantic variables
            "error",
            "success",
            "warning",
            "disabled",
            "placeholder",
            "heading-darker",
            "body-darker",
          ],
        },
      ],
    },
  },
});
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

[dcastil]

Hey @mcdhage98! 👋

Just tested your code, but it seems to work just fine. Check it out here: https://codesandbox.io/p/sandbox/dksqfk

Could it be that the problem lies somewhere else?

[mcdhage98]

Sorry my bad. Issue was on my side.
Thanks for the help @dcastil !!