diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32272f11ec4d..262a627d4b2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
+- Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
 
 ## [4.0.0-beta.2] - 2024-11-22
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index fe7e701e2ec1..9c22d51e1098 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -4467,31 +4467,31 @@ test('rotate-x', async () => {
     }
 
     @property --tw-rotate-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateX(0);
     }
 
     @property --tw-rotate-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateY(0);
     }
 
     @property --tw-rotate-z {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateZ(0);
     }
 
     @property --tw-skew-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewY(0);
     }"
@@ -4545,31 +4545,31 @@ test('rotate-y', async () => {
       }
 
       @property --tw-rotate-x {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: rotateX(0);
       }
 
       @property --tw-rotate-y {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: rotateY(0);
       }
 
       @property --tw-rotate-z {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: rotateZ(0);
       }
 
       @property --tw-skew-x {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: skewX(0);
       }
 
       @property --tw-skew-y {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: skewY(0);
       }"
@@ -4623,31 +4623,31 @@ test('rotate-z', async () => {
       }
 
       @property --tw-rotate-x {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: rotateX(0);
       }
 
       @property --tw-rotate-y {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: rotateY(0);
       }
 
       @property --tw-rotate-z {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: rotateZ(0);
       }
 
       @property --tw-skew-x {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: skewX(0);
       }
 
       @property --tw-skew-y {
-        syntax: "<transform-function>";
+        syntax: "*";
         inherits: false;
         initial-value: skewY(0);
       }"
@@ -4698,31 +4698,31 @@ test('skew', async () => {
     }
 
     @property --tw-rotate-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateX(0);
     }
 
     @property --tw-rotate-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateY(0);
     }
 
     @property --tw-rotate-z {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateZ(0);
     }
 
     @property --tw-skew-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewY(0);
     }"
@@ -4769,31 +4769,31 @@ test('skew-x', async () => {
     }
 
     @property --tw-rotate-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateX(0);
     }
 
     @property --tw-rotate-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateY(0);
     }
 
     @property --tw-rotate-z {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateZ(0);
     }
 
     @property --tw-skew-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewY(0);
     }"
@@ -4840,31 +4840,31 @@ test('skew-y', async () => {
     }
 
     @property --tw-rotate-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateX(0);
     }
 
     @property --tw-rotate-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateY(0);
     }
 
     @property --tw-rotate-z {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateZ(0);
     }
 
     @property --tw-skew-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewY(0);
     }"
@@ -5244,31 +5244,31 @@ test('transform', async () => {
     }
 
     @property --tw-rotate-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateX(0);
     }
 
     @property --tw-rotate-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateY(0);
     }
 
     @property --tw-rotate-z {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: rotateZ(0);
     }
 
     @property --tw-skew-x {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewX(0);
     }
 
     @property --tw-skew-y {
-      syntax: "<transform-function>";
+      syntax: "*";
       inherits: false;
       initial-value: skewY(0);
     }"
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 6a8b8133f937..e261b5dbae5a 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1317,11 +1317,11 @@ export function createUtilities(theme: Theme) {
 
     let transformProperties = () =>
       atRoot([
-        property('--tw-rotate-x', 'rotateX(0)', '<transform-function>'),
-        property('--tw-rotate-y', 'rotateY(0)', '<transform-function>'),
-        property('--tw-rotate-z', 'rotateZ(0)', '<transform-function>'),
-        property('--tw-skew-x', 'skewX(0)', '<transform-function>'),
-        property('--tw-skew-y', 'skewY(0)', '<transform-function>'),
+        property('--tw-rotate-x', 'rotateX(0)'),
+        property('--tw-rotate-y', 'rotateY(0)'),
+        property('--tw-rotate-z', 'rotateZ(0)'),
+        property('--tw-skew-x', 'skewX(0)'),
+        property('--tw-skew-y', 'skewY(0)'),
       ])
 
     for (let axis of ['x', 'y', 'z']) {