🎐

tailwindcss with next.jsでtailwindcss v3 -> v4

2025/01/25に公開

移行がなかなかうまく行かなかったのでやったことをとりあえずまとめとく

基本的には公式のガイドを見てやる

https://tailwindcss.com/docs/upgrade-guide

移行ツールがあるので基本それでいいはずだが、何故かローカルで動かなかったので別手段として手動で頑張ったので、この記事はそれのメモでもある

app/globals.cssの書き換え

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

これを

@import 'taiwlindcss';

@config '../tailwindcss.config.ts';

に書き換える

@config で指定するファイルはファイルパスに従って書き込むように

v4になって、このglobals.cssでいろいろ設定できるようになっているので人によってはconfigの内容をこっちに移す検討をしたほうがいいのかもしれない。そのあたりはまだ追えてないのと、少なくとも手元のプロジェクトではこれ以外に書き換える必要は(後述のopacity関連以外)なかった

tailwind.config.tsの書き換え

darkmodeの設定は移行する必要がある(っぽい?)。手元のプロジェクトでは使ってなかったので項目ごと削除した

項目によっては設定できるものが変わっている可能性があるため使ってなければ消す、使っていれば globals.css に移行する

@tailwindcss/postcssの追加

$ npm install --save-dev @tailwindcss/postcss

このようにしてパッケージを追加する。postcss周りはtailwindcssで提供されるものに変更されるらしい

postcss.config.mjsの書き換え

で、上記のプラグインを導入するためconfigの記述を

const config = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
}

から

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

に変更する

classNameの書き換え

最後に諸々のclassNameを書き換える

わかりやすいところで opacity 関連の記述が変わっているのでそれを使っている部分を書き換える

それ以外にもいくつかあるのでちゃんと書き換える必要がある

https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities

詳しくは公式ドキュメントと照らし合わせて対応しよう

Discussion