Gatsby × Tailwind CSS v4 はまだ使えない？【2025年3月版】

⚠️ Gatsby × Tailwind CSS v4 はまだ使えない？【2025年3月版】

Tailwind CSS v4 がついにリリース！
ですが，Gatsbyでそのまま使うとビルドエラー地獄にハマります…。

私もかなりハマったので備忘録として・・・

この記事では，Gatsby + Tailwindの最新セットアップと、v4が使えない理由・対処法をわかりやすくまとめます！

---

🛑 結論：Gatsbyは Tailwind CSS v4 に未対応！

❌ v4 を入れるとこうなる…

Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
The PostCSS plugin has moved to a separate package...

↑ このエラーにハマった人、この記事にたどり着いて正解です。

---

✅ 安定する構成（2025年3月現在）

npm install -D tailwindcss@3 postcss autoprefixer

• tailwindcss@3.3.x がGatsbyとの相性○
• postcss.config.js はオブジェクト形式でOK

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

---

💡 そもそも何が問題なの？

Tailwind v4では内部構成が大幅に変更されていて、PostCSS周りがGatsbyと互換しない状態。

• Tailwind v4 → postcss.plugin を使わない新方式に移行
• Gatsby（特に gatsby-plugin-postcss）はまだ対応していない

---

🚬 じゃあv4を使うにはどうすれば？

正直、今はおすすめしません。
が、ハック的に動かすなら以下の方法もあります：

✅ gatsby-node.js に以下を追記

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.css$/,
          include: /node_modules/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
  });
};

でもこれは自己責任・動作保証なし。
本番では使わない方がいいです。

---

🔢 安定構成まとめ

パッケージ	バージョン例
tailwindcss	^3.3.5
postcss	latest
autoprefixer	latest
gatsby	5.x
gatsby-plugin-postcss	latest

---

📌 まとめ

• ✅ GatsbyでTailwindを使うなら tailwindcss@3 にしておこう
• ⚠️ v4 はまだ未対応、数ヶ月後のアップデートに期待！
• ⏳ 最新を追いたいなら Vite + Tailwind v4 が現状ベスト

---

🗣️ コメント歓迎！

「v4で動いた！」「自分はこんな構成で解決した！」など、ぜひ共有してね🙏