Next.js, Tailwind, Storybookが動かない人を救いたい

事象（※2024/04/14時点での出来事です）

動かないと言うか, StorybookでTailwind CSSのスタイルが当たらない現象が発生しました.

通常は.storybook/preview.tsに

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

のように書くことでStorybookのUIにもTailwind CSSが反映されるはずです.（以下のリンク参考）

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

しかし, 反映されないのです.

厳密には,globals.cssは読み込んでいることは確認できたので,tailwindもmodule内で何かが起きてそうな感じでした.

ハマりポイントと解決策

いつも通りcreate next appをする

$ npx create-next-app gekioko

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

最後以外は全部Yes（つまりデフォルトね）

このときにできるpostcss.configファイルは, postcss.config.mjsです.

/** @type {import('postcss-load-config').Config} */

const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

しかし,これをpostcss.config.jsとして,

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

のようにしないとStorybookでは動きません.

なんじゃそりゃー（#^ω^）

正直,postcssが何をしているのかもわかっていないので,解決するまでに8時間以上かかってしまいました.

いつからか知りませんが（next14.2からかな？）npx create-next-appのデフォルトがpostcss.config.mjsなのでハマっている人は多いのではないかと思います.

同じようにハマっている人のためになれば幸いです.

あと,あまり関係ないですが,autoprefixerはinstall不要になってみたいですね.