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

[Ateam Finergy \- Qiita Advent Calendar 2024](https://qiita.com/advent-calendar/2024/ateam-finergy)の記事になります。

## はじめに

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

https://tailwindcss.com/blog/tailwindcss-v4-beta

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

## 対象レポジトリ

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

https://github.com/Adacchi3/adacchi3.github.io

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

https://qiita.com/Adacchi3/items/e6d14dda4084f6a88812

## 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へのアップグレード

https://tailwindcss.com/docs/v4-beta

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

```sh
$ 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 |
| --- | --- |
| ![スクリーンショット 2024-12-04 0.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206630/2012a271-1bc4-44ac-f07e-06e77e32bb76.png) | ![スクリーンショット 2024-12-04 0.37.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206630/bbf4d1dd-a604-9e90-a1aa-e4f19e94c5c5.png) |

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

https://tailwindcss.com/docs/v4-beta#default-border-color-change

> 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と同じデザインに変更します。

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