“cn” utility function in shadcn-ui/ui:

When I saw the cn function being imported from @/lib/utils in shadcn-ui/ui source code, I assumed that this function’s name is derived from “shadcn” since it contains “cn’’and that it handles some core logic but turns out, it is a wrapper on top of clsx and twMerge. I questioned, Why? Why would you need such a wrapper?

To understand the reason behind this cn wrapper, you must first understand clsx and tailwind-merge.

Clsx

Clsx official docs definition is that it is a tiny (239B) utility for constructing className strings conditionally.

Also serves as a faster & smaller drop-in replacement for the classnames module.

Build shadcn-ui/ui from scratch.

Examples:


import clsx from 'clsx';
// or
import { clsx } from 'clsx';
 
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
 
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
 
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });

We all are familiar with the clsx package, it is used to render the classnames conditionally.

Tailwind-merge:

To be honest, I have never used the tailwind-merge package before. So I visited the official docs and learnt that it is a utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.

Example:


import { twMerge } from 'tailwind-merge'
 
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'