React + Vite – TailWind の導入方法

目次

概要

この記事では、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 を導入する手順です。

コメント

コメントする

目次