Utils
cn
A tailwind-merge based class merge helper that resolves conflicting Tailwind utilities in the last-wins order.
Installation
- $npx litefy@latest add cn
- $pnpm dlx litefy@latest add cn
- $yarn dlx litefy@latest add cn
- $bun --bun litefy@latest add cn
Usage
import { cn } from "@/ui";
<div className={cn("p-4 rounded-lg", isActive && "bg-primary text-primary-foreground", className)} />cn is twMerge re-exported: later classes win over earlier conflicting ones, and conditional values (false, null, undefined) are ignored.
Notes
- Every Litefy component imports
cnfrom@/ui, so the utils directory must sit next to the components directory. Installing any component via CLI automatically pulls incn. - Requires the
tailwind-mergenpm package (npm add tailwind-merge).
API Reference
cn
function cn(...inputs: ClassNameValue[]): string;
type ClassNameValue = ClassValue | ClassValue[];Merges class values with tailwind-merge and returns a single class string.