2026 年 5 月 - shadcn eject

Radix と Base UI の両方のサポートを追加した際、両方のライブラリが依存する共有 Tailwind ユーティリティ ── data-open: や data-closed: などのカスタム バリアント、no-scrollbar などのユーティリティ ── のための置き場所が必要になりました。

また、RTL サポートの作業中にいくつかのバグに遭遇しましたが、すべてのコンポーネント間で重複して修正するよりも、1 つの共有場所で修正する方が簡単でした。

そこで、shadcn/tailwind.css を作成しました。 init を実行すると、グローバル CSS ファイルに @import "shadcn/tailwind.css" が追加されます。これは、tw-animate-css などの他の CSS インポートと同じように機能します。これは、運用環境でツリーシェイクされ、ビルド時に解決される小さな依存関係です。

その CSS のために shadcn パッケージに依存したくない場合のために、shadcn eject コマンドを追加しました。これは shadcn/tailwind.css をグローバル CSS ファイルにインライン化し、プロジェクトから shadcn 依存関係を削除します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject
コピー

変更前

コピー@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

変更後

コピー@import "tailwindcss";
@import "tw-animate-css";
/* ejected from shadcn@4.8.3 */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }
}
 
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}

モノレポの場合は、components.json とグローバル CSS ファイルを含むワークスペースからコマンドを実行します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject -c packages/ui
コピー

詳細については、CLI ドキュメント を参照してください。