Vue系列でも使える強力なStorybook代替「Histoire」ですが、2024年7月上旬現在、特定の条件を満たすとtailwind.config.jsのカスタムテーマを読み取ってくれないというバグがあります。

せっかくHistoireはTailwind CSSのデザインシステムをデフォルトでカタログ内に列挙してくれるという素晴らしい機能があるのに、これでは勿体ないですよね。

このためだけに別途tailwind config viewerを用意するのもなんだか無駄に手間をかけることになってしまうし...

そういうわけなので、この 「なぜかHistoireがtailwind.config.js（あるいはtailwind.config.ts）を読み取ってくれないバグ」 の修正方法があったので、ここに記録しておきます。

修正方法

下記プルリクにそのものズバリが書いてあります。

When using ESMs export default instead of module.exports in tailwind.config.{js,ts} the tailwindConfig is nested in a default key which then incorrectly merges with tailwinds default config like this:

というわけなので、冒頭にある通り結論は下記です。

tailwind.config.jsのexportが export default {...} だと動かないよ
module.exports = {...} だと動くよ

筆者も実際に試してみたところ、ちゃんとTailwind CSSのカスタムテーマが読み込まれるようになりました。これで別でtailwind config viewerを立ち上げたりしなくて済むし、チームメンバーを誤解させることもなくなる。やったー

上記のプルリクが最新版Histoireに反映されたら export default {...} でも問題なく動作するようになると思いますが、ひとまずそれまではこれで回避しましょう

著者紹介

沖縄でなんか色々作ってるWebエンジニアです。最近はAWSの次世代版サーバレス開発キット「SST Ion」激推しの人になっています。得意なフロントエンドはReact系列よりVue系列で、Nuxt3はプレビュー版の頃からプロダクトに使うなどしていたので愛着があります（プレビュー版の頃は、AWS SDKとの噛み合わせが悪かったりとたくさん苦しんだ思い出がある）。

日報SaaS「RevisNote」の運営もやってます。社内SNSの代わりにもなるので、興味があればぜひ社内に導入してみてください。随時機能更新中です。