論理的プロパティユーティリティとwebpackローダーの追加

2026年02月18日 23:45 JST tailwindlabs/tailwindcss

https://github.com/tailwindlabs/tailwindcss/pull/19695

Tailwind CSS 4.2.0では、CSS論理的プロパティに対応する新しいユーティリティクラス群と、webpackプラグインが追加されました。国際化対応のレイアウト実装と、ビルドツールの選択肢が広がります。

背景

これまでTailwind CSSは物理的な方向（top、leftなど）を指定するユーティリティのみを提供していました。しかし、RTL（右から左）レイアウトを持つ言語では、論理的プロパティ（block-start、inline-endなど）を使用することで、書字方向に依存しないレイアウトを構築できます。#19601、#19612、#19613がこの対応を実現しています。

また、Viteへの対応は進んでいましたが、webpackユーザー向けの公式サポートが不足していました。#19610が@tailwindcss/webpackパッケージとして解決策を提供しています。

技術的な変更

論理的プロパティユーティリティの追加

ブロック軸（縦書きでは横方向、横書きでは縦方向）とインライン軸（文字の並び方向）に対応する複数のユーティリティクラスが追加されました。

padding/margin:

pbs-* / pbe-*: padding-block-start / padding-block-end
mbs-* / mbe-*: margin-block-start / margin-block-end
scroll-pbs-* / scroll-pbe-*: scroll-padding-block-start / scroll-padding-block-end
scroll-mbs-* / scroll-mbe-*: scroll-margin-block-start / scroll-margin-block-end

border:

border-bs-* / border-be-*: border-block-start / border-block-end

サイズ指定:

inline-* / min-inline-* / max-inline-*: inline-size / min-inline-size / max-inline-size
block-* / min-block-* / max-block-*: block-size / min-block-size / max-block-size

位置指定:

inset-s-* / inset-e-*: inset-inline-start / inset-inline-end
inset-bs-* / inset-be-*: inset-block-start / inset-block-end

これらのユーティリティは既存の物理的プロパティと同じ命名規則に従っており、pbs-4のように数値サフィックスで値を指定できます。

webpackプラグインの追加

@tailwindcss/webpackパッケージが新たに追加され、webpackプロジェクトでTailwind CSS v4を使用できるようになりました。このパッケージはwebpackローダーとして機能し、ViteやPostCSSと同等のビルド統合を提供します。

追加の機能強化

#19627により、デフォルトテーマにmauve、olive、mist、taupeの4つの新しいカラーパレットが追加されました。#19623では、font-features-*ユーティリティがfont-feature-settingsプロパティに対応しています。

設計判断

論理的プロパティのユーティリティ命名には、CSSの標準仕様に準拠した略語が採用されました。pbs（padding-block-start）、mbe（margin-block-end）といった形式は、物理的プロパティのpt（padding-top）、mb（margin-bottom）と並行する命名規則です。

この設計により、既存のユーザーは直感的に新しいユーティリティを理解でき、物理的プロパティと論理的プロパティを混在させても一貫性が保たれます。ブロック軸の開始/終了（start/end）をbs/beで表現することで、LTR/RTLやhorizontal-tb/vertical-rlといった書字モードの違いを抽象化しています。

webpackプラグインの追加は、Vite中心の開発体制から、より広範なビルドツールエコシステムへの対応を示しています。パッケージ名を@tailwindcss/webpackとすることで、@tailwindcss/vite、@tailwindcss/postcssといった既存のツール統合パッケージとの統一感を保っています。

バグ修正とパフォーマンス改善

#19450では、color-mix値を含むCSSルールが既に@supportsルール内にある場合に、二重にラップされる問題が修正されました。#19688により、aspect-8.5/11のように0.25の倍数を含むアスペクト比が正しく認識されるようになっています。

#19632では、Oxideスキャナーのファイルシステムウォークを削減することで、大規模プロジェクトでのパフォーマンスが改善されました。#19675は、複数回の正規化処理で誤ったキャッシュが使用される問題を解決しています。

まとめ

本リリースは、国際化対応のレイアウト実装を標準機能として提供し、webpack統合により主要ビルドツールへの対応を完了させた更新です。論理的プロパティユーティリティの追加により、物理的な方向指定に依存しないコンポーネント設計が可能になり、webpackプラグインの提供により、既存のwebpackプロジェクトへの導入障壁が低減されます。