`zoom-*` ユーティリティの追加

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

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

Tailwind CSSに新たに zoom-* ユーティリティが追加され、CSSの zoom プロパティをユーティリティクラスとして利用できるようになりました。数値をパーセント値に変換するbare value形式と、任意値指定の両方に対応しています。

背景

CSSの zoom プロパティは、これまでTailwindのユーティリティ体系に組み込まれていませんでした。本PRはこの zoom プロパティをクラスベースで利用できるようにします。PR内では scale と論理的に近い概念として言及されており、当初は scale の直後への配置も検討されましたが、最終的な配置については技術的な変更セクションで詳述します。

技術的な変更

utilities.ts に functionalUtility('zoom', ...) を追加することで、zoom-* クラスが実装されました。bare value（裸の数値）は isPositiveInteger で検証され、正の整数であれば % 付きの文字列に変換されます。任意値はそのままCSSの値として渡されます。

functionalUtility('zoom', {
  handleBareValue: ({ value }) => {
    if (!isPositiveInteger(value)) return null
    return `${value}%`
  },
  handle: (value) => [decl('zoom', value)],
})

suggest('zoom', () => [
  { values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] },
])

生成されるCSSは以下の対応表の通りです：

クラス	CSS
`zoom-50`	`zoom: 50%;`
`zoom-100`	`zoom: 100%;`
`zoom-[1.1]`	`zoom: 1.1;`
`zoom-(--value)`	`zoom: var(--value);`

isPositiveInteger によるバリデーションにより、zoom-1.5 や zoom--50、zoom-unknown などの不正な形式はクラスとして生成されません。これはテストケースの run(['zoom', '-zoom-50', 'zoom--50', 'zoom-1.5', 'zoom-unknown', 'zoom-50/foo']) がすべて空文字列を返すことで確認されています。

また、property-order.ts においてプロパティの並び順も調整されました。PR内では scale の直後への配置も検討されましたが、scale と他の transform 関連プロパティの間に zoom が割り込む形になることを避け、transform ブロック全体の後ろ、animation の前に配置する判断が採られました。

  '--tw-skew-y',
  'transform',

  'zoom',

  'animation',

設計判断

bare valueを % 変換するアプローチ は、CSSの zoom プロパティの仕様に合わせた値を直感的に記述できるようにしています。zoom: 50% のようにパーセント表記を使うケースが多いことを踏まえ、zoom-50 → zoom: 50% という変換が採用されました。

一方、任意値構文（zoom-[1.1]）によってパーセント以外の数値や CSS 変数の参照も妨げない設計になっており、柔軟性も確保されています。suggest() で登録されたサジェスト値（50〜200の10段階）は IntelliSense の補完候補として機能し、開発体験を向上させます。

まとめ

zoom-* ユーティリティの追加により、CSSの zoom プロパティがTailwindのクラス体系に統合されました。bare valueの % 変換、任意値対応、プロパティ順序の整理という一貫した実装パターンは、Tailwindの既存ユーティリティ設計の慣習に沿ったものであり、transform 系ユーティリティとの整合性も維持されています。