yarn create next-app --ts + Storybook v8 で Tailwind CSS が適応されない問題への対処

問題の経緯

$ yarn create next-app --ts      # Typescript を使用する設定で Next.js プロジェクトを作成
$ # 
$ # ↑ Tailwind CSS を使用するか？：Yes を選択
$ #
$ # プロジェクトのディレクトリに移動
$ # 
$ yarn set version stable        # Storybook v8.x.x は yarn v4.x.x 以上が前提らしい
$ yarn dlx storybook@latest init # このコマンドは yarn v1.x.x では構文が違うと言われる

...として環境構築すると、yarn dev で立ち上がる Next.js 開発環境内では Tailwind CSS がバッチリ適応されるのに対して、
Storybook 内では Tailwind CSS スタイルが適応されない という問題に当たりました。

一応、以下の 2つ の Tailwind CSS のための設定は完了していました。

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import '../src/app/globals.css'; // ← ### Tailwind CSS 用の設定を追加 ###

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

export default preview;

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  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}", // ← ### Storybook 用の設定を追加 ###
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

解決方法

2024/04/28：別の問題（Next.js へのスタイルが適応されなくなる）に気付いたので修正
自動生成されている postcss.config.mjs の拡張子を .mjs → .ts に変更すると、Tailwind CSS が Storybook 内で適応されるようになります。

2024/04/28：拡張子が js だと Next.js のコンパイル時に ESM 形式じゃないとかエラーが出るので再度修正......

postcss.config.mjs → .cjs に拡張子変更

// 内容を以下のもので置き換え
module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

上記の様に、拡張子変更と内容の修正でスタイルが Next.js にも Storybook にも適応されるようになりました！

解決方法を見つけるまでの道筋

先人の記録 を調べていると、プロジェクト生成時に作られる postcss.config.mjs ファイルの拡張子を .mjs → .js に変更すると良い、とのことでした。

今回は Typescript 使用設定をしていますので、postcss.config.mjs ファイルの中身が Typescript 仕様になっています。特に export 文周りの構文が気になりました。

今回のケースでは拡張子変更だけでは問題が解決しませんでしたが、
上記の様に、拡張子を .cjs に変更 + export 文を修正すると動作することに気付きました。

その後ファイルの拡張子を .ts に変更するだけ、という手段を試したところ動作しましたので、解決策として紹介することにしました。
この方法をとると、Next.js 側にスタイルが適応されなくなってしまいました...

試行錯誤の記録

最初は Storybook の webpack 周りの設定を疑って、

$ yarn dlx storybook@latest add @storybook/addon-styling-webpack

として .storybook/main.ts も編集し、Storybook の webpack 設定をカスタマイズすることも試しましたが効果がありませんでした...

余談

対処法を見つけた後、「.mjs ってなに？全部 .ts にしよう！」と思って next.config.mjs の拡張子も .ts に変更したら、Storybook 起動時（yarn storybook 実行時）に「その拡張子には対応していない」旨のエラーが出ました...

感想

恐らくフロントエンド技術の進化が速いためでしょう、各種ツールの最新版を組み合わせて使うと特にですが、公式ドキュメントがカバーしていない問題に当たる確率が高いように思います。
（C++ や .NET に触っていた時間が長いのでそう感じるのかも...？）

Storybook や webpack 周りの挙動がデフォルトでどうなっているか、.mjs 拡張子はこの場合適切なのか等気になったので、このネタで OSS コミュニティに貢献出来たら嬉しいです。
Issue があるか確認してみようかな...

↑ 近いものがありましたが、思ったのとちょっと違うことが書いてあるような...
もう少し読み込んでみます。