Storybook上でTailwind CSSが動かない問題の解消

使用中の環境

"next": "14.0.1"
"react": "18.2.0"
"tailwindcss": "3.3.0"
"postcss": "8.4.31"
"storybook": "7.5.3"
"@storybook/nextjs": "7.5.3"

事象

上記の環境でStorybookを起動した時に下記のエラーが表示され、スタイルが当たらない問題が発生しました。

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

解決方法

tailwindcssのバージョンを3.3.0から3.3.1以降のバージョンに上げると解決しました。

リリースノートを見ると、WebpackでTypescriptの設定ファイル（tailwind.config.ts）を呼ぶときのバグが修正されたみたいでした。

試しに3.3.0でtailwind.config.tsをtailwind.config.jsに変更し、 export default している部分を module.exports するようにすると動作することが確認できました。

関連情報

Tailwind CSS v3.3.1 リリースノート

WebpackでTypescriptの設定ファイル（tailwind.config.ts）を呼ぶ時のバグ修正のプルリクエスト