UtilitiesNo. 109 of 109

Utils

The cn() helper: merges class names and resolves conflicting Tailwind utilities.

Installation

pnpm dlx shadcn@latest add @corsair-ui/utils

No setup needed: the CLI finds @corsair-ui in the shadcn registry directory. The files land in your project as source: edit them like your own code. More in Installation.

npm: clsxtailwind-merge

Examples

cn

The last conflicting utility wins.

const isHidden = false;
cn("rounded-md px-2 py-1", "px-4", isHidden && "hidden");
// → "rounded-md py-1 px-4"

API

Prop	Type	Default
`cn(...inputs)` Joins classes with clsx and resolves Tailwind conflicts: the last one wins.	`ClassValue[]`	`—`

Compatibility

Tailwind CSS: 3.4 and 4, both checked in CI
React: 19
Rendering: Works in server components

Source

1 file, installed as source you own

utils.tsView on GitHub

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

/**
 * Joins class names and lets the last conflicting Tailwind utility win, so a
 * `className` passed by the consumer always overrides the component default.
 */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}