vite-shadcn-tailwind4

**Vite** プロジェクトで Tailwind CSS v4 を使用して shadcn/ui を初期化するための手順です。 このスキルは、以下の理由により Vite 専用です。 - Vite のソリューションスタイルの `tsconfig.json`（references パターン） - `@tailwindcss/vite` プラグインが必要 - CSS エントリーファイルの規約（`src/index.css`）

Next.js、Remix、その他のフレームワークでは、それぞれに対応する shadcn のインストールガイドを必ず使用してください。

<question_tool>

• バッチ処理のルール：関連する質問が 2 つ以上ある場合にのみ使用してください。質問が 1 つだけの場合は、通常のテキストを使用してください。
• 構文上の制約：ヘッダーは最大 12 文字、ラベルは 1～5 語とし、デフォルトの選択肢には (Recommended) を付けてください。
• 目的：shadcn CLI の実行前に、コンポーネントの選択、スタイルの好み、任意の AI 要素について確認します。 </question_tool>

## ステップ 1：前提条件を確認する プロジェクトの準備ができていることを確認します。 - `vite.config.ts` が存在する必要があります。 - `package.json` に `tailwindcss`（v4 以降）と `@tailwindcss/vite` が含まれている必要があります。 - TypeScript が設定されている必要があります。

前提条件が不足している場合は、まず Tailwind v4 のセットアップを必ずユーザーに案内してください。

## ステップ 2：TypeScript のエイリアスを修正する ルートの `tsconfig.json` にパスが設定されていない場合、shadcn CLI は失敗します。Vite は references を使うソリューションスタイルの設定を使用しますが、shadcn はそれを解析できません。

操作：tsconfig.json に compilerOptions を必ず追加してください。

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

## ステップ 3：Vite の設定を確認する `vite.config.ts` に Tailwind プラグインとパスエイリアスが設定されていることを必ず確認してください。

import tailwindcss from "@tailwindcss/vite";
import path from "path";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

## ステップ 4：shadcn を初期化する 以下を実行するよう、必ずユーザーに案内してください。 ```bash npx shadcn@latest init ```

以下の設定を推奨してください。

• スタイル：New York
• ベースカラー：Neutral または Zinc
• CSS 変数：はい

続行する前に、必ずユーザーの確認を待ってください。

## ステップ 5：コンポーネントを追加する 以下を実行するよう、必ずユーザーに案内してください。 ```bash npx shadcn@latest add ```

すべてのコンポーネントを選択するよう案内してください（a を押してから Enter）。

続行する前に、必ずユーザーの確認を待ってください。

## ステップ 6：拡張機能を追加する（任意） ユーザーが AI 要素を希望する場合は、以下を実行するよう必ず案内してください。 ```bash npx shadcn@latest add @ai-elements/all ```

上書きの確認にはすべて NO と回答するよう案内してください。

続行する前に、必ずユーザーの確認を待ってください。

## ステップ 7：不足している依存関係をインストールする CLI で依存関係が不足する場合があります。`package.json` を確認し、不足しているものをインストールしてください。

必須パッケージ：

• tw-animate-css（devDep）- v4 での tailwindcss-animate の代替
• tailwind-merge（dep）- cn() ユーティリティで使用
• clsx（dep）- cn() ユーティリティで使用
• class-variance-authority（dep）- shadcn コンポーネントで使用

不足しているパッケージがある場合は、必ず実行してください：

npm install tailwind-merge clsx class-variance-authority
npm install -D tw-animate-css

## ステップ 8：v4 に準拠するよう CSS を整理する `src/index.css` を書き換え、厳密な v4 の構造に合わせてください。

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* Variable mappings: --color-X: var(--X); */
}

:root {
  /* Token definitions using oklch() */
}

.dark {
  /* Dark mode tokens using oklch() */
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

以下が存在する場合は、必ず削除してください。

• @media (prefers-color-scheme) ブロック
• 重複する @theme ブロック（@theme inline のみ残してください）
• @config ディレクティブ

## ステップ 9：セットアップを確認する 問題を検出するため、必ず型チェックを実行してください。 ```bash npm run lint ```

セットアップの完了とする前に、TypeScript のエラーを必ず修正してください。