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. 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));
}