auto-rows と auto-cols に裸値サポートを追加

この PR では auto-rows-* と auto-cols-* ユーティリティが、スペーシングスケールの裸値（例: auto-rows-12、auto-cols-16）を受け取れるようになりました。クラス指定だけで grid-auto-rows や grid-auto-columns が calc(var(--spacing) * <value>) に展開されます。

背景

従来、Tailwind CSS は auto-rows-auto、auto-rows-min、auto-rows-max、auto-rows-fr（同様に auto-cols-*）のみを提供しており、スペーシングスケールに基づく数値指定はサポートされていませんでした。そのため、開発者はカスタム CSS で grid-auto-rows: calc(var(--spacing) * 12) と記述する必要があり、ユーティリティの一貫性が欠けていました。今回の変更は、これらのユーティリティを他の spacing 系ユーティリティと同等の扱いに統一することを目的としています。

技術的な変更

packages/tailwindcss/src/utilities.ts に auto-cols と auto-rows の定義に handleBareValue が追加されました。handleBareValue は、テーマが --spacing を解決できるか確認し、値が有効なスペーシング倍率であれば --spacing(<value>) というトークンを返します。以下は変更前後の差分です。

@@ -1985,6 +1985,11 @@ export function createUtilities(theme: Theme) {

   functionalUtility('auto-cols', {
     themeKeys: ['--grid-auto-columns'],
+    handleBareValue: ({ value }) => {
+      if (!theme.resolve(null, ['--spacing'])) return null
+      if (!isValidSpacingMultiplier(value)) return null
+      return `--spacing(${value})`
+    },
     handle: (value) => [decl('grid-auto-columns', value)],
     staticValues: {
       auto: [decl('grid-auto-columns', 'auto')],
@@ -1996,6 +2001,11 @@ export function createUtilities(theme: Theme) {

   functionalUtility('auto-rows', {
     themeKeys: ['--grid-auto-rows'],
+    handleBareValue: ({ value }) => {
+      if (!theme.resolve(null, ['--spacing'])) return null
+      if (!isValidSpacingMultiplier(value)) return null
+      return `--spacing(${value})`
+    },
     handle: (value) => [decl('grid-auto-rows', value)],
     staticValues: {
       auto: [decl('grid-auto-rows', 'auto')],

テストファイル packages/tailwindcss/src/utilities.test.ts でも auto-cols-12 と auto-rows-12 の期待出力が追加され、calc(var(--spacing) * 12) が生成されることが検証されています。テストは既存のユーティリティテストに統合され、全体のテストスイートは依然としてパスします。

設計判断

handleBareValue の導入は、既存の functionalUtility フレームワークを再利用した最小侵入型の拡張です。新しい設定キーを増やす代わりに、同一キー auto-rows / auto-cols のハンドラを拡張したため、後方互換性が保たれ、既存の auto-rows-auto などはそのまま動作します。また、パーセンテージベースの値は今回の対象外として TODO に残されており、必要に応じて auto-rows-[75%] のような任意値構文で回避可能です。これにより、実装リスクを抑えつつ機能拡張を提供する設計方針が示されています。

まとめ

auto-rows-* と auto-cols-* にスペーシングスケールの裸値が利用できるようになり、Tailwind CSS のユーティリティがさらに一貫した表現力を持ちました。既存 API への影響はなく、テストで正しく機能が確認されているため、ユーザーはすぐに auto-rows-12 などのクラスを活用できます。