how.js

// 1 install
npm install class-variance-authority clsx tailwind-merge

// 2 /lib/utils.ts
/*
clsx handles conditional logic and class composition
tailwind-merge removes conflicting Tailwind classes
*/

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

cn("px-2 px-4") // => "px-4"


// 3 variant with cva
import { cva } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "rounded px-4 py-2 font-medium transition",
  {
    variants: {
      variant: {
        primary: "bg-blue-500 text-white",
        secondary: "bg-gray-200 text-black",
      },
      size: {
        sm: "text-sm",
        lg: "text-lg",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "sm",
    },
  }
)
export function Button({ variant, size, className }) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
    />
  )
}

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