Next.js + Tailwind CSS に Storybook を導入する方法

Next.js + Tailwind CSS に Storybook を導入する方法

はじめに

どーも、入田 / ぐるたか @guru_taka です!
本記事では、Next.js + Tailwind CSS に Storybook を導入する方法を紹介します。
Next.js と Tailwind CSS に加え、Storybook も使用したい方々の参考になれば幸いです!
※Next.js に Tailwind CSS が導入されていることを前提に話を進めていきます。

バージョン

  • Next.js:10.1.3
  • Tailwind CSS:2.1.1
  • Post CSS:8.2.8
  • Storybook:6.2.9

Storybook 導入の流れ

Storybook を導入する全体像は以下の通りです。
  1. Storybook に必要なパッケージをインストール
  2. 公式アドオン @storybook/addon-postcss の導入
  3. Tailwind CSS のスタイル読み込み

1. Storybook に必要なパッケージをインストール

まず、以下コマンドを実行し、Storybook をインストールしましょう。
npx sb init
すると、良しなにセットアップしてくれます。ディレクトリ構成は以下の通りです!
# ディレクトリ構成 # Storybook の設定ファイル .storybook ├── main.js └── preview.js # Storybook のデフォルトファイル # baseUrl が src ディレクトリの場合は /stories -> /src/stories /stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Header.tsx ├── Introduction.stories.mdx ├── Page.stories.tsx ├── Page.tsx ├── assets │ ├── code-brackets.svg │ ├── colors.svg │ ├── comments.svg │ ├── direction.svg │ ├── flow.svg │ ├── plugin.svg │ ├── repo.svg │ └── stackalt.svg ├── button.css ├── header.css └── page.css

2. 公式アドオン @storybook/addon-postcss の導入

続いて PostCSS を Storybook で使用するために、公式アドオン @storybook/addon-postcss を導入します。コマンドは以下の通りです。
yarn add -D @storybook/addon-postcss
Storybook で PostCSS v8 を適用するため、以下のように設定を記述します。
// .storybook/main.js module.exports = { addons: [ // 追加 { name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss'), }, }, }, ], };
以下コマンドを実行した時、Storybook が起動すれば成功です!
yarn storybook
Welcome_To_Storybook

注意事項

Storybook に @storybook/addon-postcss を導入せず、yarn storybook を実行すると、エラーが出ます。
また yarn storybook でエラーが出力された後に @storybook/addon-postcss を導入&設定して、yarn storybook を再実行すると、思うように表示されない場合がありました。
上記のような現象が起きた時は、GitHub のリポジトリからクローンして再セットアップ等してリセットすると、うまくいきます。原因不明ですが、キャッシュなどが悪さをしているかもしれません。

3. Tailwind CSS のスタイル読み込み

最後に Tailwind CSS のスタイルを読み込み、Storybook でも使えるようにします。コードは以下の通りです。
# .storybook/preview.js # 追加 import '../styles/globals.css'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, };
/* styles/globals.css */ @tailwind base; @tailwind components; @tailwind utilities;
試しに Tailwind CSS のスタイルが Storybook に反映されるかどうか、確認してみましょう!
以下のように、Storybook の Button コンポーネントの背景色を Tailwind CSS を使って、赤色に変更してみます。
// stories/Button.tsx export const Button: React.FC<ButtonProps> = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return ( // ボタンの背景色 <button type="button" className="bg-red-200" {...props}> {label} </button> ); };
yarn storybook を実行した時、下図のようにボタンの背景色が赤色になっていれば成功です!
storybook_tailwindcss_check.png

最後に

以上になります。今回は Next.js + Tailwind CSS に、Storybook を導入する方法を紹介しました。
今後もさまざまな情報をお届けしますので、楽しみにお待ちいただけたら嬉しいです!

参考文献

【無料配信】fwywd radio で起業家のリアルを配信中!

fwywd radio

キカガク創業者で代表取締役会長の吉崎が 2022 年の 4月から始動した fwywd in 淡路での起業家育成プログラムの裏側を話します。

絶対にここでしか聴くことのできない起業家の裏側をリアルな情報と共に配信しています。