Update cn utility to use extendTailwindMerge to safely merge custom theme variables

[dvzrd]

I didn't see this being discussed but the cn util uses the default twMerge function, which doesn't work with any custom tailwind theme variables. I think a merge config should be included for the semantic theme vars to avoid twMerge from removing them when a default util with a common namespace is used (i.e. bg-neutral would override bg-primary).

Here's an example:

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

const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      animate: ["accordion-down", "accordion-up"],
      color: [
        "background",
        "foreground",
        "border",
        "input",
        "ring",
        "card",
        "card-foreground",
        "popover",
        "popover-foreground",
        "muted",
        "muted-foreground",
        "accent",
        "accent-foreground",
        "primary",
        "primary-foreground",
        "secondary",
        "secondary-foreground",
        "destructive",
        "destructive-foreground",
        "chart-1",
        "chart-2",
        "chart-3",
        "chart-4",
        "chart-5",
        "sidebar",
        "sidebar-foreground",
        "sidebar-primary-foreground",
        "sidebar-accent",
        "sidebar-accent-foreground",
        "sidebar-border",
        "sidebar-ring",
      ],
    },
  },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Would still need to add a condition to use the default twMerge function if cssVariables is set to false.

---

More info about extending tailwind-merge:

• https://github.com/dcastil/tailwind-merge/blob/main/docs/api-reference.md#extendtailwindmerge
• https://github.com/dcastil/tailwind-merge/blob/main/docs/configuration.md