storybookをtailwind環境(React,Vite,typescript使用)に導入する時にハマったのでメモ

既存プロジェクトにstorybookを入れる機会があったが、少しハマったのでメモとして

環境

    "react": "^17.0.2",
    "typescript": "^4.5.2",
    "vite": "^3.0.9",
    "tailwindcss": "^2.2.19",
    "@storybook/react": "^6.5.13",

初期設定

既存プロジェクトに対して下記を実行

npx sb init
npm run storybook

コマンド一発で必要なファイルなどが自動で作成され、localhost:6006でstorybook画面が見れるようになる。
既存プロジェクトでもサラッと導入できたぞ。便利！！

プロジェクトに合わせて、初期設定をいじっていたがうまくいかずハマったポイントがあったので、下記にはそのポイントを記載していく。

XXX.stories.tsx のファイルを作っても反映されない

解決策：.storybook/main.jsの中身を修正する
sb init のコマンドで、main.jsのファイルが生成されているのでそのファイルを修正

main.js

- stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+ stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],

初期設定では、storiesフォルダ配下しか読み込まれないが、src配下を読み込むように変更
この記事にもあるように、storyはフォルダで固めない方が使いやすい

tailwindが読み込まれない

解決策：postcss.config.js ファイルをroot直下に作る

調べると、この記事のようにmain.jsにaddonを追加し、previewでscssファイルを読み込むってやってるという記事が出てくるのでそれ通りやるがうまくいかない。

$ yarn add -D @storybook/addon-postcss

main.js

	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		'@storybook/addon-interactions',
		{
			name: '@storybook/addon-postcss',
			options: {
				postcssLoaderOptions: {
					implementation: require('postcss'),
				},
			},
		},
	],

preview.js

import '../sass/app.scss' // globalで読みたいファイル

解決した方法
postcss.config.jsのファイルを作って、下記のように書いたらちゃんと読み込んでくれた。

postcss.config.js

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

参考

余談

バージョンが違うから？scssのせい、viteのせい？？など見当違いのこと考えすぎてすごくハマった。
まさか、ファイルがなかっただけなんて、、
postcss.config.jsは元々ない状態で作られてて問題なく動いていたのでこれが関係してるなんて思わなくて、記事自体は結構早めに見つけてたけどスルーしてた。
ちゃんと、一個ずつかかれてること試すのは大事な。