この変更が意味すること
Tailwind CSS v4.3.0 がリリースされました。4.x 系列の新しいマイナーリリースで、実用的な新ユーティリティクラスが多数追加されています。
最大の目玉はスクロールバー関連のユーティリティです。これまで ::-webkit-scrollbar 疑似要素やカスタム CSS が必要だったスクロールバーのスタイリングが、scrollbar-thin、scrollbar-thumb-blue-500、scrollbar-track-gray-100 のようなクラスだけで実現できるようになります。標準の CSS プロパティ（scrollbar-width、scrollbar-color）を活用しているため、クロスブラウザ対応も安心です。
その他にも @container-size、zoom-*、tab-* ユーティリティや、@variant ディレクティブのスタック・複合記法のサポートなど、開発体験を向上させる機能が追加されています。
主な変更点
scrollbar ユーティリティ
スクロールバーのスタイリングに関する3種類のユーティリティが追加されました。
scrollbar-{auto,thin,none} — scrollbar-width を制御します。scrollbar-none でスクロールバーを非表示にしつつスクロール可能な状態を維持、scrollbar-thin でコンパクトなスクロールバーを表示できます。
PR: #19981
scrollbar-thumb-* / scrollbar-track-* — scrollbar-color プロパティのサム（つまみ部分）とトラック（レール部分）の色を個別に設定できます。Tailwind のカラーパレット全体が利用可能です。
PR: #20019
scrollbar-gutter-* — scrollbar-gutter プロパティを制御し、スクロールバーの表示/非表示によるレイアウトシフトを防止できます。scrollbar-gutter-stable を指定すると、コンテンツの量に関わらずスクロールバー分のスペースが確保されます。
PR: #20018
@container-size ユーティリティ
コンテナクエリで幅と高さの両方を条件に指定できる @container-size が追加されました。従来の @container（幅のみ）に加え、縦横両方のサイズに応じたレスポンシブデザインが可能になります。
PR: #18901
zoom ユーティリティ
zoom-* ユーティリティで CSS の zoom プロパティを制御できるようになりました。transform: scale() とは異なり、要素の実際のレイアウトサイズに影響を与えるズーム操作が可能です。
PR: #20020
tab ユーティリティ
tab-* ユーティリティで tab-size プロパティを制御できます。コードブロックやプレフォーマットテキストでのタブ表示幅をカスタマイズする際に便利です。
PR: #20022
@variant のスタック・複合記法
@variant ディレクティブがスタックバリアント（@variant hover:focus { … }）と複合バリアント（@variant hover, focus { … }）をサポートするようになりました。CSS 内でバリアントを組み合わせる際の表現力が向上しています。
PR: #19996
EOL / サポート状況
| サイクル | 最新バージョン | EOL |
|---|---|---|
| 4.3 | 4.3.0 | - (現行) |
| 4.2 | 4.2.4 | - |
| 4.1 | 4.1.18 | 2026-02-18 (EOL済) |
| 4.0 | 4.0.17 | 2025-04-01 (EOL済) |
| 3.4 (LTS) | 3.4.19 | 2027-02-28 |
Tailwind CSS 4.3 が最新の安定版です。4.1 以前は EOL 済みのため、4.2 以降へのアップグレードを推奨します。3.4 は LTS として 2027年2月までサポートが継続されます。npm では v3-lts タグ（3.4.19）で引き続き利用可能です。
開発者への影響
- スクロールバーのカスタマイズが必要なプロジェクト: カスタム CSS や
::-webkit-scrollbarを使っている箇所を、標準ユーティリティに置き換えられます - コンテナクエリを活用しているプロジェクト:
@container-sizeで縦横両方のサイズ条件が使えるようになります @variantを CSS 内で使用しているプロジェクト: スタック・複合記法でより柔軟なバリアント指定が可能に- 既存プロジェクトへの影響: マイナーリリースのため破壊的変更はありません。既存のクラスは全て引き続き動作します
アップデート方法
# npm
npm install tailwindcss@4.3.0
# pnpm
pnpm update tailwindcss@4.3.0
# yarn
yarn upgrade tailwindcss@4.3.0
# Viteプラグインも合わせて更新
npm install @tailwindcss/vite@latest
データソース: GitHub Releases API, endoflife.date, npm Registry AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。