Tailwind CSS をアップデートしたらビルドエラーが発生した

2025-02-20

概要

Tailwind CSS をアップデートしたらビルドエラーが発生したので、その対処方法を記載します

対象のバージョン

3.4.15 -> 4.0.0

エラーの詳細

Error evaluating Node.js code
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    [at Te (/Users/kyoto_kanko/tech-blog/node_modules/tailwindcss/dist/lib.js:33:1751)]
    [at eval (turbopack://[project]/postcss.config.mjs/transform.ts:66:14)]
    [at <anonymous>]
    [at Module.init (turbopack://[project]/postcss.config.mjs/transform.ts:53:33)]
    [at run (turbopack://[turbopack-node]/ipc/evaluate.ts:77:20)]

なぜ発生した？

Tailwind CSS のバージョンアップにより、PostCSS プラグインが@tailwindcss/postcss に移行したため、古い設定が使えなくなったことが原因

解決方法

1. Tailwind CSS のインストール

$ npm install tailwindcss @tailwindcss/postcss postcss

2. postcss の設定ファイル変更

postcss.config.mjs

const config = {
  plugins: {
-     tailwindcss: {},
+     "@tailwindcss/postcss": {},
  },
};

3. Tailwind CSS の設定ファイル変更

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
+ @import "tailwindcss";

参考 URL

https://tailwindcss.com/docs/installation/framework-guides/nextjs