cnfast

cnfast

Fast drop-in replacement for cn.

cnfast runs 3.2x faster on average than clsx + tailwind-merge, up to 7x with tagged templates, with byte-identical output. Same API, no code changes.

import { cn } from "cnfast";

cn("px-2 py-1", isActive && "px-4", { "text-red-500": hasError });
// "py-1 px-4 text-red-500"

Install

npm install cnfast

Migrate an existing clsx, classnames, or tailwind-merge project in one command:

npx cnfast migrate

On a shadcn/ui project, add or replace your cn utility through the registry. This rewrites lib/utils.ts to re-export cnfast and installs the package:

npx shadcn@latest add aidenybai/cnfast/cn

Usage

Swap the shadcn/ui cn helper for cnfast:

// before
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

// after
export { cn } from "cnfast";

cnfast also exports clsx, twMerge, and twJoin.

Going even faster

As a tagged template, cn caches by call-site identity: a stable call site runs 2.6x faster than the cn(...) call form and 7x faster than clsx + tailwind-merge.

cn`px-2 px-4 ${isActive && "bg-blue-500"}`; // "px-4 bg-blue-500"

Comparing against cn

cnfast produces byte-identical output to clsx + tailwind-merge, then does that work faster. On a re-rendering call site, the tagged-template form pulls furthest ahead:

Across the wider suite, operations per second on Bun, best-of-3:

Workload	clsx + tailwind-merge	cnfast	Speedup
Cached re-render	2,192 ops/s	2,925 ops/s	1.33x
Merge engine, cold	473 ops/s	2,153 ops/s	4.55x
Component corpus	682 ops/s	2,421 ops/s	3.55x
Page render	3,047 ops/s	5,614 ops/s	1.84x
Live data grid	128 ops/s	231 ops/s	1.81x

Corpus and page rows are geometric means across 53 Tailwind apps and 8 captured pages; cached/cold/grid rows are single workloads. Across 65 workloads the geometric mean is 3.17x, with 0 mismatches over 113,291 real-world call groups. The bundle is 9.04 KB gzipped against 8.45 KB for the baseline.

cn runs once per element, so its cost scales with how much you render. Server-rendering a large page calls it across the whole tree, and a client app that re-renders often (data grids, virtualized tables, live dashboards) calls it thousands of times per second. A faster cn keeps those busy frames inside budget. On a small or rarely-updated page, the saving disappears into noise.

See the benchmark suite for the full breakdown and the architecture guide for how it works.

Credits

cnfast adapts MIT-licensed code from clsx (Luke Edwards) and tailwind-merge (Dany Castillo). See LICENSE.

License

MIT