Spaces:
Running
Running
/** | |
* 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)) | |
} | |