Next.js+StoryBoookでTailwindCSSが反映されない時の注意点

Next.js(v15)+TailwindCSSを使ったプロジェクトにStoryBookを導入してみよう〜と思い、初めて見たもののチュートリアルを進めても、TailwindCSSが反映されず、解決できたので共有しておきます。

tailwind.confing.tsのcontentに追加していない

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}", //ここにstoriesのパスを追加しました
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

.storybook/previewにcssをインポートしていない

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import "../src/app/globals.css";//cssを追加しました

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

export default preview;

Tailwind CSS の content 設定について

TailwindCSSでは、指定したファイルをスキャンし、実際に使用されているクラスだけを生成 します。

具体的には「未使用のスタイルを削除する (Purging)」のようなことで、最適なスタイルシートを作成するそうです。そのため、content に対象のファイルを指定し、Tailwind がどのクラスを使っているのかを判断できるようにします。

そのため、どこで使用されているかを監視する必要があり、反映させるには今回のように適応する必要がありそうでs。