Tailwind CSS v4 に移行したら、設定ファイルが消えてかなりスッキリした話

🙌 結論から

Tailwind CSS v4 に移行してみたところ、tailwind.config.js が完全に不要になり、CSS ファイルだけで設定が完結するようになりました！

これまで tailwind.config.js の theme.extend に色・フォント・スペーシングを書いていたものが、全部 CSS の @theme ディレクティブに移行できます。

移行ツールの @tailwindcss/upgrade を使えば既存プロジェクトもほぼ自動で対応できたので、思ったよりハードルは低かったです(^_^)

新規プロジェクトなら最初から v4 で始めた方がいいです！

最も大きな変化は、設定が CSS ファースト になったことですかね。

v3 までは tailwind.config.js に JavaScript で書くのが当たり前でしたが、v4 では CSS の @theme ディレクティブでカスタムデザイントークンを直接定義できます。

@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-sans: "Inter", sans-serif;
  --spacing-18: 4.5rem;
}

これだけで bg-brand や font-sans、p-18 といったクラスが自動生成されます！

また、パフォーマンス面でも改善が入っていて、CSS の生成速度がかなり速くなっています。

CSS 変数（カスタムプロパティ）との統合も自然で、:root で定義したトークンを Tailwind クラスとして使える仕組みもあります。設計の一貫性が保ちやすくなった点が個人的には相当ありがたいです。

移行には公式が提供している @tailwindcss/upgrade を使いました。

npx @tailwindcss/upgrade

実行すると、tailwind.config.js の設定を @theme ディレクティブに変換してくれます。

私のプロジェクトでは色・フォント・ブレークポイントのカスタムトークン程度だったので、ほぼ自動変換で済みました。

ただ、カスタムプラグインを使っていた部分は自動変換の対象外で、手動での書き換えが必要でしたが(・_・;)

プラグインの数が多いプロジェクトは移行コストが高くなるかもしれないので、移行前に一度プラグイン一覧を確認しておくといいと思います。

移行後に tailwind.config.js が消えたときは少し不安でしたが、CSS ファイルだけで設定が見渡せるのは想像以上に快適でした。

実際に使ってみて一番よかったのは、プロジェクトルートがスッキリしたことですね。

v3 では tailwind.config.js の theme.extend が肥大化していたのですが、CSS に移すことで「どこに何が書いてあるか」が直感的にわかるようになりました。

IDE でカーソルを当てたときに CSS 変数として値がわかるのも意外と便利で、チームでのコードレビューがしやすくなりました！

一方で、移行は一度やってしまえば快適なのですが、既存プロジェクトへの適用は慎重に進める必要があります。

CI で動作確認をしっかりしながら進めれば問題ありませんが、移行前に変更点のリリースノートを読んでおくことをおすすめします(｀・ω・´)

@theme でデザイントークンを定義するのに慣れてきたところで、独自のユーティリティクラスを作る場面にも遭遇しました。

v3では tailwind.config.js の plugin() 関数を使っていた部分が、v4では @utility ディレクティブでCSSファイル内に直接書けるようになっています。

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
}

これで class="scrollbar-hidden" がそのまま使えるようになります。JavaScriptの設定ファイルを開かずに、CSSを触っているときの流れのまま独自クラスを追加できるのがかなり快適でした(・∀・)

もう一つ体感したのが、ビルドそのものの速さです。

v4の核になっている Oxide エンジンはRustでフルスクラッチされていて、CSS解析部分には Lightning CSS（同じくRust製）が使われています。

私のプロジェクト規模だと極端な差は感じにくかったんですが、公式のベンチマークではフルビルドで3.5〜10倍、差分ビルドだと100倍以上速くなっているとのことで、大規模なプロジェクトほど恩恵が大きそうです。

HMR（保存してからブラウザに反映されるまでの時間）も明らかに速くなった感覚があって、細かいスタイル調整を繰り返す作業のストレスがかなり減りました！

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

この記事を書いている作業環境のガジェットを楽天ROOMにまとめています ✨ 在宅エンジニアのデスク作りの参考にどうぞ 🙌

Tailwind CSS v4 の移行で、一番うれしかったのは設定ファイルが減ったことでした。

tailwind.config.js の管理から解放されて、CSS だけで完結する設計は長期運用でもかなり楽になりそうだと感じています。

移行ツールも用意されているので、新しいプロジェクトはもちろん、既存プロジェクトでも試してみる価値はあります。ぜひ試してみてください🙌

※ Tailwind CSSのバージョンによって仕様が変わることがあります。最新情報は Tailwind CSS公式ドキュメントをご確認ください👀