Gatsbyをv3からv5に変更した時にハマったCSS-in-JSのポイント

はじめに

CSS in JSを採用しているGatsby Projectをv5へとVersion Upした。
そこで Cannot find module 'tailwindcss/lib/util/toPath' と言うエラーにハマり調査に少し時間を要したので後に続く方のために日本語で解決方法の残しておきます。

---

対象となる読者

Cannot find module 'tailwindcss/lib/util/toPath' Gatsby tailwindcss path error Gatsby Twin.micro error などで修正方法を探している方。

---

結論

以下Issueにある方法の通りで修正できました。
gatsby-browser.js Can't resolve — Tailwindcss Guide #34731

Gatsbyはv3でCSS-in-JSを使う場合はrailwindcssや各種packageをinstallした後で

gatsby-browser.js

import "tailwindcss/dist/base.min.css"

上記の記述で問題ありませんでした。
しかしv4以降では、そもそもnode_modules/tailwindcss/dist/base.min.css はなくなっています。
そのため、開発環境を立ち上げようとすると以下のようなエラーに遭遇します。

ModuleBuildError: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
  Error: /Users/xxx/Project/xxx/xxx/src/pages/xxx.jsx: Cannot find module 'tailwindcss/lib/util/toPath'

では、Issueの内容と重複しますが、どうすれば良いかをまとめます。

詳細

• postcssがなければinstall

yarn add -D postcss

• root直下にpostcss.config.jsを作成
• postcss.config.jsに以下の記述を追加する

post.config.js

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

• メインのcssファイルに以下を追記(なければsrc/global.cssなどを作成)

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• 最後にgatsby-browser.jsに以下を追記

gatsby-browser.js

import './src/global.css'

おまけ

Gatsbyのdocだけではなく、Tailwind側にも同様の記載がありました。
Get started with Tailwind CSS using PostCSS