📘 cn() কী? React + Tailwind এ clsx ও twMerge সহজভাবে ব্যবহার (shadcn/ui style)

function FancyHeading({ title }) {
  return <h1 className="text-center text-gray-800">{title}</h1>;
}

yarn add clsx

import clsx from "clsx";
 
function FancyHeading({ title, isPrimary }) {
  return (
    <h1
      className={clsx(
        "text-center text-gray-800",
        isPrimary && "text-3xl text-blue-500",
      )}
    >
      {title}
    </h1>
  );
}

text-center text-gray-800 text-3xl text-blue-500

yarn add tailwind-merge

import { twMerge } from "tailwind-merge";
import clsx from "clsx";
 
twMerge(
  clsx("text-center text-gray-800", isPrimary && "text-3xl text-blue-500"),
);

import clsx from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

import { cn } from "@/lib/utils";
 
function FancyHeading({ title, isPrimary }) {
  return (
    <h1
      className={cn(
        "text-center text-gray-800",
        isPrimary && "text-3xl text-blue-500",
      )}
    >
      {title}
    </h1>
  );
}

function getVariantStyle(variant) {
  switch (variant) {
    case "primary":
      return "text-3xl text-blue-500";
    case "secondary":
      return "text-xl text-green-500";
    default:
      return "text-gray-800";
  }
}

function FancyHeading({ title, variant }) {
  return (
    <h1 className={cn("text-center", getVariantStyle(variant))}>{title}</h1>
  );
}

function FancyHeading({ title, variant, className }) {
  return (
    <h1 className={cn("text-center", getVariantStyle(variant), className)}>
      {title}
    </h1>
  );
}

<FancyHeading title="Hello World" variant="secondary" className="underline" />