Tailwind CSS 类名拼接加速器：比 clsx + tailwind-merge 快近 4 倍的 cn 替代方案

在使用 Tailwind CSS 开发 React（尤其是 shadcn/ui）项目时，你是否经常为 cn 工具函数的性能瓶颈而困扰？cnfast 是一个专为性能优化而生的轻量级替代库——它完全兼容你现有的 cn 调用方式，无需修改一行业务代码，就能让类名拼接速度提升 3.8 倍（组件密集场景最高达 7 倍），同时输出结果与原方案字节级一致。它不是“另一个工具”，而是你正在用的 cn 的更快、更稳、开箱即用的升级版。

核心功能

• 零迁移成本的无缝替换：API 完全对齐 clsx + tailwind-merge，所有条件类名、对象语法、数组嵌套写法均原样支持，导入路径一换即生效
• 极致运行时性能：实测平均提速 3.8×，在大量使用 cn 的 UI 组件库（如 shadcn/ui）中，单次调用可快至 7 倍，显著降低渲染耗时
• 智能调用点缓存（Tagged Template 支持）：当以模板字符串形式调用 cn`px-2 ${isActive ? 'bg-blue-500' : ''}` 时，自动按调用位置缓存结果，避免重复解析与哈希计算，提速高达 4.3×
• 一键自动化迁移：内置 npx cnfast migrate 命令，自动识别并替换项目中所有 clsx、classnames 或 tailwind-merge 组合的 cn 实现，省去手动搜索替换的繁琐
• shadcn/ui 深度集成：支持通过官方 shadcn@latest add 命令直接注册，自动修改 lib/utils.ts 并安装依赖，三步完成接入
• 全功能导出集合：除主函数 cn 外，同步导出 clsx、twMerge 和 twJoin，满足调试、渐进式迁移或特殊场景需求

适合哪些人用

如果你是以下任一角色，cnfast 都值得立刻尝试：

• Tailwind CSS + React 开发者，尤其正在使用 shadcn/ui 构建设计系统或中大型应用；
• 性能敏感型项目维护者，关注首屏渲染、组件重绘等关键指标，希望从工具链底层压榨性能；
• 团队技术负责人，需要在不改变开发习惯的前提下，统一升级基础工具，降低长期维护成本；
• 前端工程化实践者，重视构建体积、运行时开销与 DX（开发者体验）的平衡。

快速上手

安装仅需一条命令：

npm install cnfast

接着，将你项目中 lib/utils.ts（或其他定义 cn 的文件）里的导出替换为：

export { cn } from "cnfast";

如果你使用 shadcn/ui，推荐更便捷的方式：

npx shadcn@latest add aidenybai/cnfast/cn

想验证效果？运行迁移脚本自动扫描并升级全项目：

npx cnfast migrate

无需配置、无需学习新语法——你写的每一行 cn("text-sm", isActive && "font-bold", { "opacity-75": disabled }) 都会立即获得性能加成。

项目信息

TypeScript 编写｜GitHub Star 数：361｜开源协议：未明确声明（NOASSERTION）｜GitHub 项目地址

用 cnfast 替换你的 cn，就像给 Tailwind 工具链装上涡轮增压——快得理所当然，稳得毫不费力。