Next.js Storybook 設定

storybookの設定で時間を溶かしてしまったのでメモ。

不具合

• storybookで見るとtailwindのスタイルが有効になっていない。

解決方法

• .storybook/preview.tsでtailwindを設定しているcssをimportする。
• postcss.config.mjs を postcss.config.js にリネームする。

環境構築

1. Nextのプロジェクト作成 npx create-next-app@latest
   • tailwindのオプションを聞かれるのでyesにする
   • プロジェクトが作成されると postcss.config.mjs が作成される。<- .mjsだとstorybookで読み込めないっぽい。
2. shadcn/uiをインストール npx shadcn-ui@latest init
   • 最近人気のuiコンポーネント
   • tailwindを使用している
   • 必要なコンポーネント毎にインストールできる。コンポーネントをインストールするとnode_modulesではなく、components/uiディレクトリにそのコンポーネントが追加される。
   • 試しにbuttonを追加する。 npx shadcn-ui@latest add button
3. storybookをインストール 手順は 公式通り:https://storybook.js.org/docs/get-started/nextjs
4. storyを作成する。 例: src/components/ui/stories/button.stories.tsx
   src/components/ui/stories/button.stories.tsx

   import { Button } from '@/components/ui/button'
   import type { Meta, StoryObj } from '@storybook/react'
   
   const meta: Meta<typeof Button> = {
     title: 'Button',
     component: Button,
     tags: ['autodocs'],
   }
   
   export default meta
   
   type Story = StoryObj<typeof Button>
   
   export const Default: Story = {
     args: {
       children: 'Default',
     },
   }

   storybookを起動して確認するとスタイルが効いていない。

対策1 .storybook/preview.tsでtailwindを設定しているcssをimportする。

import type { Preview } from '@storybook/react'
import '../src/styles/globals.css'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
}

export default preview

対策2 postcss.config.mjs を postcss.config.js にリネームする。

module.exports = {
  plugins: {
    tailwindcss: {},
  },
}

これでstorybookを起動するとtailwindのスタイルが有効になっているはず。

storybookでmjsが読み込めないのは中々気づかない...