Skip to main content

Utility Functions

cn() - Class Name Utility​

Location: src/lib/cn.ts

Purpose: Intelligently merges Tailwind classes, preventing conflicts.

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

// Merges classes and resolves conflicts
<div className={cn("px-4 py-2", className, isActive && "bg-primary")} />

How it works:

  1. clsx - Conditionally joins classNames
  2. tailwind-merge - Merges Tailwind classes intelligently
  3. Resolves conflicts (e.g., px-2 px-4 → px-4)