【超簡単解決】Next.js で Tailwind CSS が Storybook 上では適用されない

この記事は以下の人へ向けた解決策です

1. npx create-next-app@latest --typescript で Next.js のプロジェクトを作成時に Tailwind CSS を使えるように選択した
2. そして実際に Next.js の自動生成した page.tsx などでは Tailwind CSS が適用されていることを確認した
3. 次に Storybook を使いたいので npx storybook@latest init で Storybook をインストールした
4. Next.js 上では Tailwind CSS が適用されたのに Storybook 上では適用されない。 ← イマココ

補足：今回 create-next-app 時に src フォルダを使用することにしているので使用していない方はフォルダ構成 src/app を app に読み替えて下さい。

解決時の依存関係のバージョン

• "typescript": "^5"
• "next": "14.2.5"
• "tailwindcss": "^3.4.1"
• "storybook": "^8.2.7"

解決手順

にしたがって .storybook/preview.ts を開いて以下のコードを追記する。

import "../src/app/globals.css";

もしこのファイルを消していたのなら、

にしたがって src/app/globals.css を作成し、以下のコードを記述する。

src/app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

追記

上記の内容を実行しても Storybook で表示されるコンポーネントに Tailwind CSS が適用されていない場合は tailwind.config.ts に以下の記述があるか確認する。

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    // この配列に適用されていないコンポーネントのパスが含まれているか確認する
  ]
};