Using 'clsx' or 'classnames' with 'tailwind-merge'

A function that allows the conditional classnames from ‘clsx’ or ‘classnames’ to be passed into ‘tailwind-merge’.

Combining clsx or classnames with tailwind-merge allows us to conditionally join Tailwind CSS classes in classNames together without style conflicts. Inspired by shadcn/ui.

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
function cn(...args: ClassValue[]) {
  return twMerge(clsx(args));
}