Function cn

  • Merges CSS classes using clsx and tailwind-merge for optimal class handling.

    This function combines the power of clsx for conditional class handling with tailwind-merge to intelligently merge Tailwind CSS classes, removing conflicts and optimizing the final class string.

    Parameters

    • ...classes: ClassValue[]

      Variable number of class values (strings, objects, arrays, etc.).

    Returns undefined | string

    The merged and optimized class string, or undefined if no valid classes.

    cn('px-4 py-2', 'px-6', { 'bg-red-500': true }); // "py-2 px-6 bg-red-500"
    
    cn('text-lg', 'text-sm', { 'font-bold': isBold }); // "text-sm font-bold" (text-lg removed due to conflict)