🎐
tailwindcss with next.jsでtailwindcss v3 -> v4
移行がなかなかうまく行かなかったのでやったことをとりあえずまとめとく
基本的には公式のガイドを見てやる
移行ツールがあるので基本それでいいはずだが、何故かローカルで動かなかったので別手段として手動で頑張ったので、この記事はそれのメモでもある
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
関連の記述が変わっているのでそれを使っている部分を書き換える
それ以外にもいくつかあるのでちゃんと書き換える必要がある
詳しくは公式ドキュメントと照らし合わせて対応しよう
Discussion