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