概要
この記事では、React + TypeScript + Vite で作成したプロジェクトに TailWind CSS と Storybook を導入する方法について説明します。TailWind CSS は、ユーティリティクラスを使用したモダンな CSS フレームワークで、迅速なスタイリングを可能にします。また、Storybook を使用することで、コンポーネントの開発とドキュメント化が効率的に行えます。
手順
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 CSS をインストールする
以下のコマンドを実行して Tailwind CSS と @tailwindcss/vite をインストールします。
npm install tailwindcss @tailwindcss/vite
3. 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()],
});
4. グローバル CSS の設定
次に、src/index.css
ファイルに以下の内容を記述します。
index.css
@import "tailwindcss";
これにより、Tailwind CSS のスタイルがプロジェクト全体で有効になります。
5. Storybook をプロジェクトに追加
Storybook をインストールします。以下のコマンドを実行します。
npx storybook@latest init
このコマンドで Storybook の初期設定が自動的に行われます。
6. Storybook に Tailwind CSS を設定
Storybook に Tailwind CSS を読み込ませるために、.storybook/preview.ts
ファイルを編集します。
.storybook/preview.ts
import "../src/index.css";
7. 動作確認
最後に、Storybook を再起動して Tailwind CSS が適用されているか確認します。以下のコマンドを実行します。
npm run storybook
ブラウザで表示された Storybook のページに Tailwind CSS のスタイルが適用されていれば、設定は完了です。
まとめ
この記事では、React + Vite プロジェクトに TailWind CSS と Storybook を導入する手順を説明しました。これにより、効率的なコンポーネント開発とスタイリングが可能となります。
コメント