React + Vite – TailWind と Storybook の導入方法

目次

概要

この記事では、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 を導入する手順を説明しました。これにより、効率的なコンポーネント開発とスタイリングが可能となります。

コメント

コメントする

目次