【TailwindCSS】v3からv4へアップグレードする方法

アップグレードツールを使用

以下のコマンドを実行することで大部分の作業を自動で行えます。

yarn dlx @tailwindcss/upgrade@next

手動でアップグレード

手動でアップグレードするにはTailwindCSSをv3からv4に変更することに加えて以下の作業を行います。

@tailwindcss/postcssをインストール

以下のコマンドを実行して@tailwindcss/postcssをインストールします。

yarn add @tailwindcss/postcss

不要な依存関係の削除

autoprefixerがある場合は削除します。

yarn remove autoprefixer

postcss.config.mjsの変更

postcss.config.mjsを以下のように変更します。

postcss.config.mjs

export default {
  plugins: {
-   tailwindcss: {},
-   autoprefixer: {},
+   "@tailwindcss/postcss": {},
  },
};

@tailwindディレクティブを削除

@tailwindディレクティブを@import "tailwindcss";に変更します。

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

tailwind.config.jsを読み込む

tailwind.config.jsが読み込まれなくなっています。
読み込まれるようにするにはCSSファイルに以下を追記する必要があります。

@config "../../tailwind.config.js";

または設定をCSSファイルに移行します。

破壊的変更の影響を受ける箇所を更新

以下のページにリストされている破壊的変更の影響を受ける箇所を更新します。