概要
この記事では、React + TypeScript + Vite を使用して作成したプロジェクトに TailWind CSS をインストールする方法について解説します。TailWind CSS は、ユーティリティクラスを使用したモダンな CSS フレームワークで、迅速なスタイリングを可能にします。
参考: Installing Tailwind CSS with Vite – Tailwind CSS
手順
1. プロジェクトを作成する
まず、Vite を使用して React プロジェクトを作成します。以下のコマンドを実行して、プロジェクトを新規に作成します。
npm create vite@latest
√ Project name: ... react-tailwind
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC
上記の手順により、TypeScript と SWC (高速な JavaScript/TypeScript コンパイラ) を利用する設定で React プロジェクトが初期化されます。 次に、プロジェクトディレクトリに移動して依存関係をインストールします。
cd react-tailwind
npm install
2. Tailwind をインストールする
以下のコマンドを実行して Tailwind CSS と @tailwindcss/vite をインストールします。
npm install tailwindcss @tailwindcss/vite
Vite プラグインの設定
次に、vite.config.ts
ファイルに @tailwindcss/vite プラグインを追加します。
vite.config.ts
// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});
グローバル CSS の設定
次に、src/index.css
ファイルに以下の内容を記述します。
index.css
@import "tailwindcss";
これにより、Tailwind CSS のスタイルがプロジェクト全体で有効になります。
3. Tailwind CSS が適用されていることを確認する
最後に、./src/App.tsx
を以下のように編集して Tailwind CSS が正常に適用されていることを確認します。
App.tsx
import "./App.css";
function App() {
return (
<>
<div className="text-red-500 p-4 text-xl">Tailwind CSS</div>
</>
);
}
export default App;
プロジェクトを起動して、Tailwind CSS が正常に適用されているか確認します。
npm run dev
ブラウザで表示されたページに Tailwind CSS
というテキストが赤色で表示されていれば、Tailwind CSS の導入が成功しています。
以上が、React + Vite プロジェクトに Tailwind CSS を導入する手順です。
コメント