Back to home

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 classes in classNames without style conflicts.

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