🔖

Next.js + Storybook に Tailwind CSSを適用

に公開
Next.js
Storybook
Tailwind CSS
tech

バージョン

"next": "13.4.7",
"tailwindcss": "3.3.2",
"@storybook/react": "7.0.23",

Next.jsをセットアップ

create-next-appでNext.jsとTailwindCSSをセットアップします。

＄ npx create-next-app@latest                          
✔ What is your project named? … 
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … No
✔ Would you like to customize the default import alias? … Yes

https://nextjs.org/docs/getting-started/installation#automatic-installation

Storybookをセットアップ

Storybookのinitコマンドでセットアップします。

$ npx storybook@latest init

https://storybook.js.org/recipes/next

globals.cssをStorybook側で読み込み

StorybookでもTailwindCSSの設定を適用するために.storybook/preview.tsでglobals.cssを読み込みます。

.storybook/preview.ts
 import type { Preview } from "@storybook/react";
+import "../src/styles/globals.css";

※globals.cssはTailwindのディレクティブを読み込んでいるCSSになります。
　Next.jsのセットアップでApp Routerを設定した場合はsrc/app/globals.cssになるかと思います。

tailwind.config.jsにパスを追加

最後に、tailwind.config.jsのcontentプロパティにStoryファイルのパスを追加します。

tailwind.config.js
content: [
  './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
  './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ './stories/**/*.{js,ts,jsx,tsx}',
],

Discussion