Viteプロジェクトでのshadcnインストール時のTailwindエラー

問題の説明

Viteで作成したReactプロジェクトにshadcnを導入する際、npx shadcn@latest init コマンド実行中に次のエラーが発生します：

No Tailwind CSS configuration found at /your/project/path.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again. 
Visit https://tailwindcss.com/docs/guides/vite to get started.

この問題は、一見正しくTailwind CSSをインストールしているように見える場合でも発生します（下記の手順後）。具体的には以下のコマンドを実行した後でもエラーがでます：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

エラーの根本原因は、TailwindのディレクティブがグローバルCSSファイルに正しく追加されていないことです。公式設定手順を実施したつもりでも、この初期設定ステップが抜けるケースが頻繁に報告されています。

---

解決方法

問題を修正するには、プロジェクトのグローバルCSSファイル（通常は src/index.css）に次の3行を追記します：

@tailwind base;
@tailwind components;
@tailwind utilities;

具体的な手順：

1. プロジェクトのCSSファイルを開く

   # 例（VSCodeで開く場合）
   code src/index.css

2. ファイルの先頭に以下を追記：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

3. shadcnの初期化コマンドを再実行：

   npx shadcn@latest init

これで設定ファイルが検出され、正常に処理が完了します。この方法はshadcn公式のGitHubイシューで確認された確実な解決策です。

---

技術的背景

• Tailwindディレクティブの役割：
  @tailwind 宣言は、Tailwindがベーススタイル・コンポーネント・ユーティリティクラスを生成する起点となります。これが存在しないと、Tailwindが有効化されずshadcnの依存関係エラーを引き起こします。

• なぜ公式手順で見逃しが起きるのか？
  TailwindのVite公式ガイドではCSSファイルへの追記を明記していますが、Reactプロジェクトの多様性によりファイルパスを見逃すケースが発生します。特に既存プロジェクトへの導入時によく見られます。

---

追加確認事項

1. CSSファイルの場所：
   index.css が src/ ディレクトリ以外にある場合、パス調整が必要です。shadcnはデフォルトで src/index.css を参照します。

2. PostCSS設定の存在確認：
   tailwind.config.js と postcss.config.js がプロジェクトルートに生成されていることを確認してください：

   ls -l tailwind.config.js postcss.config.js

3. 依存パッケージのバージョン：
   下記コマンドで最新バージョンを使用しているか確認：

   npm list tailwindcss postcss autoprefixer