React + TypeScript + Tailwind CSS セットアップ手順

1. プロジェクトの作成

まず、デスクトップに移動し、Vite を使用して React + TypeScript のプロジェクトを作成します。

cd ~/Desktop
npm create vite@latest my-project -- --template react-ts

2. 必要なパッケージのインストール

作成したプロジェクトディレクトリに移動し、必要な依存関係をインストールします。

cd my-project
npm install
npm install tailwindcss @tailwindcss/vite

3. Vite の設定 (vite.config.ts)

プロジェクトのルートディレクトリにある vite.config.ts を編集し、Tailwind CSS のプラグインを追加します。

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4. Tailwind CSS の設定 (CSS ファイル)

プロジェクトの CSS ファイル（例: src/index.css または src/globals.css）に以下を追加し、Tailwind CSS を適用します。

@import "tailwindcss";

5. プロジェクトの起動

セットアップが完了したら、以下のコマンドで開発サーバーを起動できます。

npm run dev

これで、Vite + React + TypeScript + Tailwind CSS の環境が構築されました！