Custom cn() function #util #javascript #typescript #js

util.ts

export function cn(...classes: (string | undefined | null | false)[]) {
  return classes.filter(Boolean).join(' ');
}

This function meant to replace tailwind provided util:

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

By using this function we can get rid of 2 dependencies - clsx and tailwind-merge, but we loose the abilities of tailwind-merge like silently merging duplicate classes (IMHO I prefere to do it myself for less magic and more visibility, but that's just me).