Ateam Finergy - Qiita Advent Calendar 2024の記事になります。

はじめに

2024年11月22日にTailwind CSS v4.0 Betaが発表されました。

こちらの記事では一足早く、v4.0 Betaを試していきます。

対象レポジトリ

Tailwind CSS v4.0 Betaを試すところは、私のポートフォリオサイトで実施していきます。

どのような作り方をしたのかはこちらの記事をご参照ください。

Tailwind CSS v4で何が変わるのか？

Geminiに記事を要約させてみると、Tailwind CSS v4.0 Betaは以下の4つの大きな改善点があります。

ビルドパフォーマンスの改善: 最大5倍の高速化を実現
統合されたツールチェイン: CSSファースト構成に合わせて設計
CSSファーストな設定: 現代のWebに対応
モダンなWebに向けた設計

Tailwind CSS v4.0 は、パフォーマンスのために構築され、現代の Web に対応するように設計されたまったく新しいエンジンです。以前のバージョンよりも最大 5 倍高速で、CSS ファースト構成、広色域カラー、最新の CSS 機能のファーストクラスサポートなど、多くの新機能が含まれています。

Tailwind CSS v4.0 Betaへのアップグレード

Tailwind CSS v4.0 Betaのアップグレードには@tailwindcss/upgrade@nextを使っていきます。

$ npx @tailwindcss/upgrade@next
≈ tailwindcss v4.0.0-beta.4

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./tailwind.config.js` to `./src/styles/globals.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Migrated configuration file: `./tailwind.config.js` 

│ Migrating templates… 

│ ↳ Migrated templates for configuration file: `./tailwind.config.js` 

│ Migrating stylesheets… 

│ ↳ f.toSorted is not a function in `./src/styles/globals.css` 

│ ↳ Migrated stylesheet: `./src/styles/globals.css` 

│ Migrating PostCSS configuration… 

│ ↳ Installed package: `@tailwindcss/postcss` 

│ ↳ Removed package: `autoprefixer` 

│ ↳ Migrated PostCSS configuration: `./postcss.config.js` 

│ Updating dependencies… 

│ ↳ Updated package: `tailwindcss` 

│ Verify the changes and commit them to your repository.

上記のコマンドにて、だいたいアップグレードが完了しました。

autoprefixerの削除
@tailwindcss/postcssの追加
CSSファイルに設定が追加
Breaking Changesに該当するプロパティの変更

見た目の確認

アップグレードした後、開発環境を立ち上げ、見た目が変わっていないかをチェックします。

before	after

どうやらボーダーに色が付いたようです。変更差分を確認していきます。

In v3, borders used your configured gray-200 color by default. We’ve updated this in v4 to be just currentColor, which matches the default behavior of all browsers.

上記の変更に当たっていました。v3ではデフォルトでgray-200になってましたが、v4からcurrentColorになるとのことです。

今回はデザインの変更を考えていないため、v3と同じデザインに変更します。

@import 'tailwindcss';

+ @layer base {
+   *,
+   ::after,
+   ::before,
+   ::backdrop,
+   ::file-selector-button {
+     border-color: var(--color-gray-200, currentColor);
+   }
+ }

上記でアプデ前と同様のデザインを維持することができました。

ビルド速度の変化

私のポートフォリオはNextjs + Tailwind CSS + PostCSSで実装しております。Tailwind CSSのアップグレード前後のビルド速度を確認してみました。

	アプデ前	アプデ後
real	0m13.471s	0m11.792
user	0m17.532s	0m17.163s
sys	0m1.738s	0m1.565s

ページ数が少ないため、大幅な改善は感じられませんでしたが、軽微な改善が見られました。

まとめ

Tailwind CSS v4.0 Betaを試してみました。

ガッツリ対応する必要があると覚悟しながら挑んでましたが、アップグレードツールのおかげもあり効率的に対応できました。

v3からの細かな変更にも注意が必要ですが、正式リリースを期待しつつ、その日を楽しみにしたいと思います。