gitmyhub

cnfast

TypeScript ★ 1.2k updated 16d ago

Fast drop in replacement for `cn`

A drop-in replacement for the popular Tailwind CSS class-merging function that runs about 3.8x faster on average. Your app looks identical, it just gets there faster, especially during frequent re-renders.

TypeScriptTailwind CSSReactsetup: easycomplexity 2/5

If you've built a web app with Tailwind CSS, you're probably using a utility function called cn to combine class names — it merges styles together and intelligently resolves conflicts (like when one component says "small padding" and another says "large padding"). cnfast is a drop-in replacement for that function that runs significantly faster — about 3.8x faster on average, and up to 7x faster on component-heavy code. The output is byte-identical, meaning your app looks exactly the same; it just gets there faster.

At a high level, the tool does the same job as the popular tailwind-merge library, but it's been rewritten to compute results more efficiently. It also includes a clever caching trick: when the same combination of class names comes up repeatedly (which happens constantly during re-renders), it can skip redundant work. This matters most in apps that re-render frequently — think live dashboards, data grids, or virtualized tables where the function might get called thousands of times per second.

This is useful for developers building React apps (or similar frameworks) who want to squeeze out performance without rewriting their codebase. If you're using shadcn/ui, a popular component library, there's a one-command migration. If you're using clsx, classnames, or tailwind-merge directly, there's an automated migration command that swaps things over. The API stays the same, so no manual code changes are needed.

The tradeoff is minimal. The bundle is about 1 KB larger than the baseline (9.43 KB gzipped vs. 8.45 KB), and the project has been tested against over 113,000 real-world cases with zero mismatches. For small, static pages you won't notice a difference. For interactive apps that render a lot, the speedup helps keep frames smooth and within budget.

Where it fits