File size: 1,060 Bytes
3b8892c
 
 
 
 
 
 
e4ff188
 
 
3b8892c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e4ff188
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * Utility helpers shared across the entire application.
 *
 * Currently exposes a single helper, `cn`, which is the standard pattern for
 * combining Tailwind CSS class names in a type-safe and conflict-free way.
 */

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

/**
 * Merges one or more Tailwind CSS class name strings or conditional objects
 * into a single, de-duplicated class string.
 *
 * Internally this runs `clsx` first (which handles conditional objects and
 * arrays) and then passes the result through `tailwind-merge` so that
 * conflicting utility classes are resolved correctly (e.g. `p-2 p-4` → `p-4`).
 *
 * @param inputs - Any mix of strings, objects, or arrays accepted by `clsx`.
 * @returns A merged Tailwind class string with conflicts resolved.
 *
 * @example
 * cn("px-4 py-2", isActive && "bg-blue-500", "hover:bg-blue-600")
 * // → "px-4 py-2 bg-blue-500 hover:bg-blue-600"  (when isActive is true)
 */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}