cn教程：shadcn官方出品的Tailwind类名合并引擎，比clsx快30倍

📌 项目日期：2026年9月 | 数据来源：GitHub官方仓库 | 星数：1,061+

📋 项目简介

几乎所有 Tailwind 项目都在用 clsx + tailwind-merge 这对组合处理条件类名与冲突解决。现在 shadcn-ui 官方放出了替代品：cn。它是全新的 Tailwind 类名合并与冲突解决引擎，API 与两者完全兼容，官方基准测试快 30 倍，且零依赖。项目由 shadcn 本人与 aidenybai 维护，上线即登 GitHub Trending。

它不挑框架：React、Vue、Svelte、Solid、Astro 甚至纯服务端模板都能用；浏览器、Node、Bun、Deno、Edge 运行时全兼容。任何 Tailwind CSS 项目都可以用，不要求你上 shadcn/ui。如果你在做 AI 参与的前端工作流，可以把它与 M3E Canvas设计转提示词教程 搭配，设计产物直接落成干净的 Tailwind 代码。

🔧 核心特性

📦 安装与迁移

# 安装
npm i cn

# shadcn/ui 项目一键迁移
npx shadcn@latest migrate cn

# 新项目直接用
import { cn } from "cn"

cn("px-2 py-1", isActive && "bg-blue-500", { "text-white": isActive })

🔧 手动替换（现有项目）

// lib/utils.ts —— 替换前
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// 替换后：一行搞定
export { cn } from "cn";

替换后从依赖里删掉 clsx 和 tailwind-merge。如果其他包还在引入它们，按官方文档把这两个包 alias 到 cn，保证 bundle 里只存在一份实现。

💡 使用建议

• 新项目直接上 cn，老项目挑一个发布窗口做替换，收益是更快的类名解析与更小的依赖树
• 组件里 className={cn("rounded-md px-4 py-2", active && "bg-primary", className)} 的写法保持不变，调用方零改动
• Monorepo 里注意用 alias 收敛实现，避免 clsx/tailwind-merge/cn 三份并存