typescripttailwindcssutility

cn() Class Merge Utility

Tailwind CSS class merge utility using clsx and tailwind-merge. Handles conflicts intelligently.

Code

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

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

// Usage
<div className={cn(
  'base-class px-4 py-2',
  isActive && 'bg-blue-500',
  isDisabled && 'opacity-50 cursor-not-allowed',
  className // Allow override from props
)}>