My personal website
renderg.host
1import { clsx, type ClassValue } from 'clsx';
2import { twMerge } from 'tailwind-merge';
3
4/**
5 * Merges class names using clsx and tailwind-merge
6 * Combines multiple class values and resolves Tailwind CSS conflicts
7 *
8 * @param inputs - Class values to merge (strings, objects, arrays)
9 * @returns Merged class string with Tailwind conflicts resolved
10 *
11 * @example
12 * ```tsx
13 * mergeClasses('px-4', 'px-2') // => 'px-2' (later wins)
14 * mergeClasses('text-red-500', condition && 'text-blue-500') // => conditional classes
15 * ```
16 */
17export function mergeClasses(...inputs: ClassValue[]) {
18 return twMerge(clsx(inputs));
19}
20
21// Legacy export for backward compatibility
22export { mergeClasses as cn };