Spaces:
Running
Running
File size: 1,315 Bytes
dbc2c2a f09b9f0 dbc2c2a f09b9f0 |
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 30 31 32 33 34 35 |
/**
* UTILITY FUNCTIONS
*
* Common utility functions used throughout the application.
* Currently contains the `cn` function for combining CSS class names intelligently.
*/
import { clsx, type ClassValue } from "clsx" // Utility for conditional class names
import { twMerge } from "tailwind-merge" // Utility for merging Tailwind classes
/**
* Combine and merge CSS class names intelligently
*
* This function combines the power of two popular utilities:
* - `clsx`: Handles conditional class names and various input types
* - `twMerge`: Intelligently merges Tailwind CSS classes, resolving conflicts
*
* Key benefits:
* - Handles conditional classes: cn("base", condition && "conditional")
* - Resolves Tailwind conflicts: cn("p-4", "p-2") → "p-2" (last one wins)
* - Removes duplicates and undefined values
* - Supports arrays, objects, and mixed types
*
* @param inputs Variable number of class values (strings, objects, arrays, etc.)
* @returns Single string with merged and optimized class names
*
* @example
* cn("btn", "btn-primary", isActive && "active")
* cn("p-4 m-2", { "bg-red-500": hasError, "bg-green-500": isSuccess })
* cn(["base-class", "modifier"], conditionalClass)
*/
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
|