`tab-*` ユーティリティの追加による `tab-size` 制御のサポート

2026年05月09日 04:22 JST tailwindlabs/tailwindcss

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

Tailwind CSS に tab-* ユーティリティが新たに追加され、CSSの tab-size プロパティをクラスで直接制御できるようになりました。正の整数値とArbitrary Valuesの両方をサポートしています。

背景

これまで Tailwind CSS では、コード表示などで重要なタブ文字の幅を制御する tab-size プロパティに対応するユーティリティが存在しませんでした。タブ幅の調整が必要な場合は、インラインスタイルやカスタムCSSを別途記述するしかありませんでした。本PRはこの欠如を解消し、既存のテキストレイアウト系ユーティリティ群に tab-* を加えるものです。

技術的な変更

tab-* ユーティリティは functionalUtility として実装され、ベア値（数値のみの指定）とArbitrary Valuesを受け付ける設計になっています。

packages/tailwindcss/src/utilities.ts に追加されたコードは以下のとおりです：

functionalUtility('tab', {
  handleBareValue: ({ value }) => {
    if (!isPositiveInteger(value)) return null
    return value
  },
  handle: (value) => [decl('tab-size', value)],
})

suggest('tab', () => [{ values: ['2', '4', '8'] }])

handleBareValue に isPositiveInteger チェックを組み込むことで、tab-2.5 や tab-1/2 のような小数・分数表記は無効として弾かれ、tab-2 や tab-8 のような正の整数のみが受理されます。生成されるCSSは以下のように単純なプロパティマッピングになります：

クラス	CSS
`tab-2`	`tab-size: 2;`
`tab-4`	`tab-size: 4;`
`tab-8`	`tab-size: 8;`
`tab-[12px]`	`tab-size: 12px;`

また、packages/tailwindcss/src/property-order.ts に tab-size が追加されており、white-space の直後・color の直前という位置に配置されました。

  'text-overflow',
  'hyphens',
  'white-space',
  'tab-size',

  'color',
  'text-transform',

この順序は既存のテキストレイアウト関連プロパティ群（text-overflow、hyphens、white-space）と意味的に近いグループに配置されており、CSSの出力順序が意図に沿って整理されています。

設計判断

テーマ変数による拡張と Intellisense サポートが最初から考慮されています。

テストコードでは --tab-size-github: 8 というテーマ変数の定義例が示されており、@theme ブロックに独自のタブサイズを登録する用途が想定されていることがうかがえます。suggest 関数で ['2', '4', '8'] を登録することで、IDEの補完候補にも即座に反映されます（Intellisenseスナップショットに tab-2・tab-4・tab-8 が追加済み）。

ベア値を正の整数のみに制限し、分数・小数・負値を弾く設計は、誤った値の生成を防ぐ防御的なアプローチです。

まとめ

tab-* ユーティリティの追加により、これまでカスタムCSSが必要だったタブ幅の制御がユーティリティクラスで完結するようになりました。isPositiveInteger による入力バリデーション、プロパティ順序への組み込み、テーマ変数対応と Intellisense サポートまで一貫して整備されており、他のユーティリティと同じ体験で利用できます。