cn

The cn utility function combines clsx and tw-merge. This enables you to construct className strings conditionally without having to worry about Tailwind CSS style conflicts.

Installation

1. Install the dependencies:

Copynpm install clsx tailwind-merge

2. Copy the code 👇 into your lib/utils.ts file:

Copyimport clsx from "clsx";
import { ClassNameValue, twMerge } from "tailwind-merge";
 
export function cn(...classes: ClassNameValue[]) {
  return twMerge(clsx(classes));
}