cn

cn use clsx for to conditionally combine classes and twMerge to merge them. He come from shadcn/ui.

import { cn } from "tailwind-merge";
const className = cn(
  "px-4 py-2 rounded",
  {
    "bg-blue-500 text-white": isPrimary,
    "bg-gray-200 text-gray-800": !isPrimary,
  },
  {
    "hover:bg-blue-600": isPrimary,
    "hover:bg-gray-300": !isPrimary,
  }
);
// className will be 'px-4 py-2 rounded bg-blue-500 text-white

Custom

You can create your own cn like this:

import { twMerge } from "tailwind-merge";
import clsx from "clsx";

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