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

Moved the page from under /snippets to /blog on the 10th of February 2024.