Remove percentage values for translate-z utilities (#13321)

* handle `translate-z` separately

* do not support fractions for `translate-z`

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Remove percentage values for `translate-z` utilities ([#13321](https://github.com/tailwindlabs/tailwindcss/pull/13321))
 
 ## [4.0.0-alpha.10] - 2024-03-19
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -1727,7 +1727,6 @@ exports[`getClassList 1`] = `
   "translate-z-1",
   "translate-z-3",
   "translate-z-4",
-  "translate-z-full",
   "translate-z-px",
   "truncate",
   "underline",

packages/tailwindcss/src/utilities.test.ts

@@ -2582,47 +2582,38 @@ test('translate-y', () => {
 })
 
 test('translate-z', () => {
-  expect(run(['translate-z-full', '-translate-z-full', 'translate-y-px', '-translate-z-[--value]']))
-    .toMatchInlineSnapshot(`
-    ".-translate-z-\\[--value\\] {
-      --tw-translate-z: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
-
-    .-translate-z-full {
-      --tw-translate-z: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
-
-    .translate-y-px {
-      --tw-translate-y: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+  expect(run(['translate-y-px', '-translate-z-[--value]'])).toMatchInlineSnapshot(`
+      ".-translate-z-\\[--value\\] {
+        --tw-translate-z: calc(var(--value) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
+      }
 
-    .translate-z-full {
-      --tw-translate-z: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
-    }
+      .translate-y-px {
+        --tw-translate-y: 1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    @property --tw-translate-x {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-x {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-y {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-y {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-z {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }"
-  `)
-  expect(run(['translate-z'])).toEqual('')
+      @property --tw-translate-z {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }"
+    `)
+  expect(run(['translate-z', 'translate-z-full', '-translate-z-full', 'translate-z-1/2'])).toEqual(
+    '',
+  )
 })
 
 test('translate-3d', () => {

packages/tailwindcss/src/utilities.ts

@@ -1239,14 +1239,11 @@ export function createUtilities(theme: Theme) {
     ],
   })
 
-  for (let axis of ['x', 'y', 'z']) {
+  for (let axis of ['x', 'y']) {
     let handle = (value: string) => [
       translateProperties(),
       decl(`--tw-translate-${axis}`, value),
-      decl(
-        'translate',
-        `var(--tw-translate-x) var(--tw-translate-y)${axis === 'z' ? ' var(--tw-translate-z)' : ''}`,
-      ),
+      decl('translate', `var(--tw-translate-x) var(--tw-translate-y)`),
     ]
 
     /**
@@ -1265,6 +1262,25 @@ export function createUtilities(theme: Theme) {
       return handle(candidate.negative ? '-100%' : '100%')
     })
   }
+  functionalUtility(`translate-z`, {
+    supportsNegative: true,
+    supportsFractions: false,
+    themeKeys: ['--translate', '--spacing'],
+    handle: (value) => {
+      return [
+        translateProperties(),
+        decl(`--tw-translate-z`, value),
+        decl('translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'),
+      ]
+    },
+  })
+  utilities.static(`translate-z-px`, (candidate) => {
+    return [
+      translateProperties(),
+      decl(`--tw-translate-z`, candidate.negative ? '-1px' : '1px'),
+      decl('translate', 'var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z)'),
+    ]
+  })
 
   /**
    * @css `translate`