cn()

A utility function that merges Tailwind CSS classes with clsx and tailwind-merge, resolving conflicts automatically.

Preview

Click to toggle — cn() merges base + conditional classes, resolving Tailwind conflicts automatically.

Installation

npx shadcn@latest add @shadszn/utils

Source

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

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

Usage Examples

import { cn } from "@/lib/utils"

// Merge static classes
cn("px-4 py-2", "bg-blue-500")
// => "px-4 py-2 bg-blue-500"

// Resolve conflicts (last wins)
cn("px-4", "px-6")
// => "px-6"

// Conditional classes
cn("text-sm", isActive && "text-blue-500", isDisabled && "opacity-50")
// => "text-sm text-blue-500" (if isActive is true)

// With component className prop
function MyComponent({ className }: { className?: string }) {
  return (
    <div className={cn("rounded-xl bg-white p-4", className)}>
      Content
    </div>
  )
}

// User can override defaults:
<MyComponent className="bg-red-500 p-8" />
// => "rounded-xl bg-red-500 p-8" (bg-white and p-4 replaced)

Why cn()?

clsx handles conditional class joining -- arrays, objects, and falsy values
tailwind-merge resolves Tailwind conflicts so later classes override earlier ones
Together, they let component consumers safely override default styles via className