Ensure scale utilities support percentages (tailwindlabs#13182)

* Ensure scale utilities support percentages

* Update changelog

* Fix changelog entry

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: wongjn <11310624+wongjn@users.noreply.github.com>

Author: adamwathan

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
 
 ## [4.0.0-alpha.7] - 2024-03-08
 

packages/tailwindcss/src/utilities.test.ts

@@ -2607,13 +2607,13 @@ test('scale', () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number>";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number>";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }"
@@ -2639,13 +2639,13 @@ test('scale-x', () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number>";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number>";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }"
@@ -2671,13 +2671,13 @@ test('scale-y', () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number>";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number>";
+      syntax: "<number> | <percentage>";
       inherits: false;
       initial-value: 1;
     }"

packages/tailwindcss/src/utilities.ts

@@ -1312,7 +1312,10 @@ export function createUtilities(theme: Theme) {
   ])
 
   let scaleProperties = () =>
-    atRoot([property('--tw-scale-x', '1', '<number>'), property('--tw-scale-y', '1', '<number>')])
+    atRoot([
+      property('--tw-scale-x', '1', '<number> | <percentage>'),
+      property('--tw-scale-y', '1', '<number> | <percentage>'),
+    ])
 
   /**
    * @css `scale`

packages/tailwindcss/tests/ui.spec.ts

@@ -221,6 +221,18 @@ test('dividers can be added without setting border-style', async ({ page }) => {
   expect(await getPropertyValue('#b', 'border-top')).toEqual('4px dashed rgb(0, 0, 0)')
 })
 
+test('scale can be a number or percentage', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`<div id="x" class="scale-[50%] hover:scale-[1.5]">Hello world</div>`,
+  )
+  expect(await getPropertyValue('#x', 'scale')).toEqual('0.5')
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'scale')).toEqual('1.5')
+})
+
 // ---
 
 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')