cx

Install external dependencies

npm i clsx tailwind-merge

Source Code

File: src/utils/functions/cx.ts

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

export function cx(...args: ClassValue[]): string {
  return twMerge(clsx(...args));
}

Description

The cx function merges multiple class names intelligently by:

1. Using clsx to handle conditional classes, arrays, and objects
2. Using tailwind-merge to resolve Tailwind CSS class conflicts

This ensures that when conflicting Tailwind classes are provided (e.g., "p-4 p-8"), only the last one is applied ("p-8").

Dependencies

• clsx: For conditional class name concatenation
• tailwind-merge: For resolving Tailwind CSS class conflicts