From 82d9fca4fd0b8a4c6619ac97f1f3b195c8863536 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 7 May 2026 11:48:53 +0200 Subject: [PATCH 1/3] add `zoom-*` utilities --- .../__snapshots__/intellisense.test.ts.snap | 10 +++++ packages/tailwindcss/src/property-order.ts | 2 + packages/tailwindcss/src/utilities.test.ts | 39 +++++++++++++++++++ packages/tailwindcss/src/utilities.ts | 19 +++++++++ 4 files changed, 70 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 736bac1be8d0..0f95045736dd 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -12244,6 +12244,16 @@ exports[`getClassList 1`] = ` "z-40", "z-50", "z-auto", + "zoom-50", + "zoom-75", + "zoom-90", + "zoom-95", + "zoom-100", + "zoom-105", + "zoom-110", + "zoom-125", + "zoom-150", + "zoom-200", ] `; diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts index e92bc374479c..943f349211e2 100644 --- a/packages/tailwindcss/src/property-order.ts +++ b/packages/tailwindcss/src/property-order.ts @@ -92,6 +92,8 @@ export default [ '--tw-skew-y', 'transform', + 'zoom', + 'animation', 'cursor', diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 25d3497ac970..0f3ac2dc879a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -6899,6 +6899,45 @@ test('transform', async () => { ).toEqual('') }) +test('zoom', async () => { + expect( + await compileCss( + css` + @theme { + --zoom-compact: 80%; + } + @tailwind utilities; + `, + ['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]', 'zoom-compact'], + ), + ).toMatchInlineSnapshot(` + " + :root, :host { + --zoom-compact: 80%; + } + + .zoom-50 { + zoom: 50%; + } + + .zoom-100 { + zoom: 100%; + } + + .zoom-\\[var\\(--zoom\\)\\] { + zoom: var(--zoom); + } + + .zoom-compact { + zoom: var(--zoom-compact); + } + " + `) + expect( + await run(['zoom', '-zoom-50', 'zoom--50', 'zoom-1.5', 'zoom-unknown', 'zoom-50/foo']), + ).toEqual('') +}) + test('perspective', async () => { expect( await compileCss( diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index c40f3be93e2e..2224c50955ce 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1706,6 +1706,25 @@ export function createUtilities(theme: Theme) { staticUtility('transform-none', [['transform', 'none']]) } + /** + * @css `zoom` + */ + functionalUtility('zoom', { + themeKeys: ['--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'], + valueThemeKeys: ['--zoom'], + }, + ]) + /** * @css `transform-style` */ From 289765cb0d2399408dc5ba9704126151c8950254 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 7 May 2026 11:54:26 +0200 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cb433421fee7..f31bb43b4a51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996)) - Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996)) - Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989)) +- Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020)) ### Fixed From 0ba1251d7c7dd19e6203683930794800f870a675 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 May 2026 21:09:02 +0200 Subject: [PATCH 3/3] do not read from theme keys --- packages/tailwindcss/src/utilities.test.ts | 13 +------------ packages/tailwindcss/src/utilities.ts | 6 +----- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0f3ac2dc879a..ede8c8f09067 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -6903,19 +6903,12 @@ test('zoom', async () => { expect( await compileCss( css` - @theme { - --zoom-compact: 80%; - } @tailwind utilities; `, - ['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]', 'zoom-compact'], + ['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]'], ), ).toMatchInlineSnapshot(` " - :root, :host { - --zoom-compact: 80%; - } - .zoom-50 { zoom: 50%; } @@ -6927,10 +6920,6 @@ test('zoom', async () => { .zoom-\\[var\\(--zoom\\)\\] { zoom: var(--zoom); } - - .zoom-compact { - zoom: var(--zoom-compact); - } " `) expect( diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 2224c50955ce..4cbd783239c1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1710,7 +1710,6 @@ export function createUtilities(theme: Theme) { * @css `zoom` */ functionalUtility('zoom', { - themeKeys: ['--zoom'], handleBareValue: ({ value }) => { if (!isPositiveInteger(value)) return null return `${value}%` @@ -1719,10 +1718,7 @@ export function createUtilities(theme: Theme) { }) suggest('zoom', () => [ - { - values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'], - valueThemeKeys: ['--zoom'], - }, + { values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] }, ]) /**