diff --git a/CHANGELOG.md b/CHANGELOG.md index b2b1ecb51709..fd441caaa2ad 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)) - Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018)) ### Fixed diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index b281e0f98959..01636618d8f8 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -12247,6 +12247,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 0fa99cc53cf8..016200c6c175 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 492986e83284..b2873294d30e 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -6899,6 +6899,34 @@ test('transform', async () => { ).toEqual('') }) +test('zoom', async () => { + expect( + await compileCss( + css` + @tailwind utilities; + `, + ['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]'], + ), + ).toMatchInlineSnapshot(` + " + .zoom-50 { + zoom: 50%; + } + + .zoom-100 { + zoom: 100%; + } + + .zoom-\\[var\\(--zoom\\)\\] { + zoom: var(--zoom); + } + " + `) + 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 599cfc0c5a3f..74e39ee5f64e 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1706,6 +1706,21 @@ export function createUtilities(theme: Theme) { staticUtility('transform-none', [['transform', 'none']]) } + /** + * @css `zoom` + */ + 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 `transform-style` */