cn とは？tailwind-mergeとclsxを30倍高速化する次世代Tailwindユーティリティ

shadcn-ui/cnは、tailwind-mergeとclsxの完全なドロップイン代替ライブラリです。同一APIで30×〜172×高速、ゼロ依存でReact/Vue/Svelte等すべてのフレームワークに対応します。

GitHubで急上昇中の shadcn-ui/cn をご紹介します。スター数 1423★ を獲得し、Web分野で注目されているツールです。

cn とは？

shadcnとAiden Baiが共同開発したcnは、Tailwind CSSプロジェクトで広く使われるtailwind-mergeとclsxを一つのパッケージに統合した新世代エンジンです。typicalなコンポーネント呼び出しで30倍、大規模コーパスでは幾何平均37倍の高速化を実現しながら、APIは完全互換でドロップイン移行が可能です。ゼロ依存・26KB（minified）と軽量で、ブラウザ・Node・Bun・Deno・エッジランタイムすべてで動作します。

こんな人におすすめ:

エンジニア向け: shadcn/uiプロジェクト既存ユーザーはCLI一発で移行可能。新規プロジェクトはnpm i cnで即利用可能
非エンジニア向け: プログラミング知識が必要なため、フロントエンドエンジニア専用ツールです

主な機能・特徴

tailwind-mergeとclsxをドロップイン置換し移行コマンド一発で対応
典型的なコンポーネント呼び出しで30倍・大規模コーパスで37倍高速化
ゼロ依存・フレームワーク非依存でReact/Vue/Svelte/Astroに対応
Tailwind v4プレフィックス・カスタムテーマに対応したcreateCn APIを提供
cn buildによるVite/Next.js向けバンドル時クラス最適化をサポート

tailwind-merge 代替 cn 使い方：インストールと移行

cnのインストールは一行で完了します。

npm i cn

既存shadcn/uiプロジェクトへの移行

CLIを使った自動移行（推奨）:

npx shadcn@latest migrate cn

手動移行の場合は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";

基本的な使い方

import { cn } from "cn"

export function Button({
  className,
  active,
  ...props
}: React.ComponentProps<"button"> & { active?: boolean }) {
  return (
    <button
      className={cn(
        "rounded-md px-4 py-2 text-sm",
        active && "bg-primary",
        className
      )}
      {...props}
    />
  )
}

条件付きクラス結合（clsx）とクラス競合解決（tailwind-merge）を一つの関数で処理します。

shadcn cn 高速 30倍の仕組み：パフォーマンスの真実

cnが30倍高速な理由は、引数の同一性キャッシュと事前コンパイル済みテーブルにあります。

シナリオ	clsx + tailwind-merge	cn	速度差
典型的なコンポーネント呼び出し	320 ns	10 ns	30×
キャッシュヒット	14 ns	7 ns	1.9×
大規模コーパス（58リポジトリ）	-	-	37×（幾何平均）
SSRスタイルのユニーク文字列	2.3 µs	360 ns	6.4×

ベンチマークの再現

pnpm bench          # 合成ベンチマーク
pnpm bench:corpus   # 58リポジトリの実データでベンチマーク

活用事例

フロントエンドエンジニアの移行シナリオ

フロントエンドエンジニアがshadcn/uiプロジェクトにnpx shadcn@latest migrate cnを実行し、tailwind-merge+clsxを一括置換します。バンドルサイズと描画速度を改善し、特にコンポーネントが多い大規模アプリケーションでの恩恵が大きくなります。

Next.js開発チームの導入シナリオ

Next.js開発チームがwithCn()プラグインを導入し、大規模SSRアプリのTailwindクラス解決コストを37倍削減してTime to First Byteを短縮します。

// next.config.ts
import { withCn } from "cn/next"

export default withCn({
  // ...既存のNext.js設定
})

tailwind-mergeとの違い・なぜ今このツールか

tailwind-mergeは長年Tailwind CSSの事実上の標準でしたが、動的なクラス解決のコストが積み重なる問題がありました。cnはまず「引数の同一性チェック」で既に処理した呼び出しパターンをスキップし、さらにビルド時にTailwindの設定をコンパイル済みテーブルに変換することで、ランタイムコストを大幅に削減しています。clsxとの比較では、cnは単純な文字列結合でも同等以上の性能を発揮します。shadcn/uiの正式ツールとして採用されたことで、エコシステム全体への波及も期待されます。

こんな人に向いている

フロントエンドエンジニアには最も直接的な恩恵があります。コンポーネントライブラリを保守するエンジニアは、ドロップイン移行で即座にパフォーマンス向上を得られます。

Next.js/Astroエンジニアは、cn/nextやcn/viteプラグインを使うことでビルド時最適化も活用でき、特にSSR環境でのTailwindクラス解決コストを劇的に削減できます。

UIライブラリ開発者は、毎フレーム呼ばれるcn()の高速化によってレンダリングのボトルネックを解消できます。特に大規模なデザインシステムを構築しているチームに強くお勧めします。

使う前に知っておきたいこと

Tailwindバージョン: cnはTailwind CSS v4に対応。Tailwind v3を使用しているプロジェクトはtailwind-merge v2のままを推奨
Node.jsバージョン: CLIの使用にはNode 20以上が必要
動的クラス名: "p-" + sizeのような動的構築はcn buildで検出不可（Tailwind本体と同じ制限）。--safelistを使用してください
ライセンス: MIT License。商用利用・改変・再配布すべて自由
クラス動作の差異: text-2xsのようにTailwindユーティリティに見えるクラスはTailwindユーティリティとして扱われる（tailwind-mergeと同じ動作）

まとめ

cnはshadcn/uiエコシステムから生まれた新標準ライブラリで、tailwind-mergeとclsxのパフォーマンス限界を突破します。特にSSRや大規模コンポーネントライブラリを持つチームにとって即効性の高い移行先です。MIT License・Node 20+・Tailwind v4が導入済みのプロジェクトで真価を発揮します。

GitHub でチェックする →

この技術を学ぶ

Webフロントエンドに興味を持った方には、Udemyのオンラインコースもおすすめです。

関連するWebコース一覧 — セール時（最大90%OFF）を狙うとお得です