cn() — className Utility with clsx + tailwind-merge
The standard Tailwind + clsx utility for merging class names without conflicts.
#typescript#tailwind css#utility
typescript
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
/**
* Merge Tailwind classes safely — later classes win conflicts.
* e.g. cn('p-4', condition && 'p-8') → 'p-8' (not 'p-4 p-8')
*/
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// Usage examples
cn('px-4 py-2', 'px-8') // → 'py-2 px-8'
cn('text-red-500', isActive && 'text-blue-500') // → 'text-blue-500' if active
cn('rounded-md', { 'opacity-50': isDisabled }) // object syntax