Twinkle

Twinkle

既存LaravelプロジェクトのTailwind4への更新作業

スターターキットが新しくなってBreezeやJetstreamのTailwind4対応はやる気がなさそうなので自力で更新。

対象バージョン:Laravel12とJetstream5.3かBreeze2.3。

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

基本的にはこのコマンド一つでほぼ自動更新される。

npx @tailwindcss/upgrade

この時の更新方法はいくつかある。

  • tailwind.config.jsが削除されてresources/css/app.cssに置き換わるパターン
  • tailwind.config.jsは残ったままresources/css/app.cssでtailwind.config.jsを読み込むパターン

おそらくtailwind.config.jsで複雑な設定していると残る。この状態から手動でtailwind.config.jsなしに変更するのは大変なのでそのまま使ったほうが良さそう。

PostCSSの代わりに@tailwindcss/viteを使うなら変更。Laravel12時点の公式と同じなので合わせたほうが楽。

自動更新で修正されない箇所が少し残るので手動で修正。BreezeでもJetstreamでも使われてるring-opacity-5が残ってるはず。