cn

Merge Tailwind classes with clsx and tailwind-merge.

LiveutilityReact, WebUpdated 2026-10-07MIT License Source on GitHub Report Issue

Dependencies:npm install clsx tailwind-merge

Introduction

Merge Tailwind class names without conflicting utilities. Uses clsx for conditional classes and tailwind-merge so later classes win (for example p-2 over p-4).

Dependencies: clsx, tailwind-merge

Implementation

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

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

Usage

tsx

<button
  className={cn(
    "rounded-md px-3 py-2 text-sm",
    isActive && "bg-emerald-500 text-white",
    className
  )}
/>

Footer

Keep one cn helper per app. Reactopia uses the same pattern in src/lib/utils.ts.