Zenn
😸

React.js × Tailwind CSS × Storybook

2022/10/18に公開
React
Storybook
Tailwind CSS
tech

はじめに

最近はReact.jsとTailwind CSSを使った開発をよくしています。
今回はそこにStorybookを導入して、React.js × Tailwind CSS × Storybookの組み合わせの環境構築をやったので忘れないように記録します。

環境構築

今回はこれらを使ってStorybookからComponentの確認とテストをするところまでやっていきます。

  • React.js
  • TypeScript
  • TailwindCSS
  • Storybook

最終的なディレクトリ構造

最終的にこのようなディレクトリ構造になります。
今回はお試しなのでシンプルな構造ですが、実際はsrc以下にcomponentsなどを作成することが多いかと思います。

├── package-lock.json
├── package.json
├── README.md
├── postcss.config.js
├── .storybook
│   ├── main.js
│   └── preview.js
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   └── stories
│       ├── Button.stories.tsx
│       ├── Button.tsx
│       ├── Header.stories.tsx
│       ├── Header.tsx
│       ├── Introduction.stories.mdx
│       ├── Page.stories.tsx
│       ├── Page.tsx
│       ├── assets
│       ├── button.css
│       ├── header.css
│       └── page.css
├── tailwind.config.js
└── tsconfig.json

Reactのプロジェクト作成

まずはReactのプロジェクトをnpxを使って作成します。
基本的にはTailwind CSSの公式サイトを参考にしていきます。
https://tailwindcss.com/docs/guides/create-react-app

環境も整備します。

npx create-react-app my-project --template typescript
cd my-project

Tailwind CSSのインストール

早速Tailwind CSSをインストールします。

npm install -D tailwindcss postcss autoprefixer

次にinitコマンドを使ってtailwind.config.jsとpostcss.config.jsの両方を生成します。

npx tailwindcss init -p

生成されたconfigファイルを修正します。
これはディレクトリ構造に合わせて適宜変更が必要となります。

tailwind.config.js
module.exports = {
  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

create-react-appをしてプロジェクトを作っていれば、src/index.cssがあると思うので追記します。

src/index.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

Storybookの導入

早速メインのStorybookをインストールしていきます。

npx sb init

またTailwindとStorybookを使う場合は、preview.jsに先ほど追加した@tailwindディレクティブを読み込ませる必要があります。
これを忘れるとStorybook上でtailwindのcssが反映されません。

.storybook/preview.js
+ import "../src/index.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

ここまで完了したらStorybookを起動してみましょう。

npm run storybook

このようにブラウザ上でコンポーネントを確認することができました。
storybook display

今回はここまでですが、次回はコンポーネントの作成とテスト機能を使ってみたいと思います。

Discussion