From ae9ced5a53c3b26210542f4fcd13b22ea6dc883d Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:14:23 -0500
Subject: [PATCH 1/2] Don't register properties with types unless necessary

---
 .../src/__snapshots__/utilities.test.ts.snap  |  18 +-
 packages/tailwindcss/src/index.test.ts        |   8 +-
 packages/tailwindcss/src/utilities.test.ts    | 204 +++++++++---------
 packages/tailwindcss/src/utilities.ts         |  38 ++--
 4 files changed, 134 insertions(+), 134 deletions(-)

diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index e39b3dea6329..c8e1a11372da 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -127,7 +127,7 @@ exports[`border-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -260,7 +260,7 @@ exports[`border-b-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -393,7 +393,7 @@ exports[`border-e-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -526,7 +526,7 @@ exports[`border-l-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -659,7 +659,7 @@ exports[`border-r-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -792,7 +792,7 @@ exports[`border-s-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -925,7 +925,7 @@ exports[`border-t-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -1058,7 +1058,7 @@ exports[`border-x-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -1191,7 +1191,7 @@ exports[`border-y-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 4a471ffc4462..73a26dd6f227 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -302,19 +302,19 @@ describe('@apply', () => {
       }
 
       @property --tw-translate-x {
-        syntax: "<length> | <percentage>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }
 
       @property --tw-translate-y {
-        syntax: "<length> | <percentage>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }
 
       @property --tw-translate-z {
-        syntax: "<length>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }"
@@ -717,7 +717,7 @@ describe('sorting', () => {
       }
 
       @property --tw-space-x-reverse {
-        syntax: "<number>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }"
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 65602d7ab104..3f1b25333112 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -3982,19 +3982,19 @@ test('translate', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4055,19 +4055,19 @@ test('translate-x', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4132,19 +4132,19 @@ test('translate-x', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4203,19 +4203,19 @@ test('translate-y', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4280,19 +4280,19 @@ test('translate-y', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4334,19 +4334,19 @@ test('translate-z', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4384,19 +4384,19 @@ test('translate-3d', async () => {
     }
 
     @property --tw-translate-x {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-y {
-      syntax: "<length> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-translate-z {
-      syntax: "<length>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -4884,56 +4884,56 @@ test('skew-y', async () => {
 test('scale', async () => {
   expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]']))
     .toMatchInlineSnapshot(`
-    ".-scale-50 {
-      --tw-scale-x: calc(50% * -1);
-      --tw-scale-y: calc(50% * -1);
-      --tw-scale-z: calc(50% * -1);
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
+      ".-scale-50 {
+        --tw-scale-x: calc(50% * -1);
+        --tw-scale-y: calc(50% * -1);
+        --tw-scale-z: calc(50% * -1);
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
 
-    .scale-50 {
-      --tw-scale-x: 50%;
-      --tw-scale-y: 50%;
-      --tw-scale-z: 50%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
+      .scale-50 {
+        --tw-scale-x: 50%;
+        --tw-scale-y: 50%;
+        --tw-scale-z: 50%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
 
-    .scale-\\[2\\] {
-      scale: 2;
-    }
+      .scale-\\[2\\] {
+        scale: 2;
+      }
 
-    .scale-\\[2_1\\.5_3\\] {
-      scale: 2 1.5 3;
-    }
+      .scale-\\[2_1\\.5_3\\] {
+        scale: 2 1.5 3;
+      }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
         }
       }
-    }
 
-    @property --tw-scale-x {
-      syntax: "<number> | <percentage>";
-      inherits: false;
-      initial-value: 1;
-    }
+      @property --tw-scale-x {
+        syntax: "*";
+        inherits: false;
+        initial-value: 1;
+      }
 
-    @property --tw-scale-y {
-      syntax: "<number> | <percentage>";
-      inherits: false;
-      initial-value: 1;
-    }
+      @property --tw-scale-y {
+        syntax: "*";
+        inherits: false;
+        initial-value: 1;
+      }
 
-    @property --tw-scale-z {
-      syntax: "<number> | <percentage>";
-      inherits: false;
-      initial-value: 1;
-    }"
-  `)
+      @property --tw-scale-z {
+        syntax: "*";
+        inherits: false;
+        initial-value: 1;
+      }"
+    `)
   expect(
     await run([
       'scale',
@@ -4965,19 +4965,19 @@ test('scale-3d', async () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-z {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }"
@@ -5013,19 +5013,19 @@ test('scale-x', async () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-z {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }"
@@ -5054,19 +5054,19 @@ test('scale-x', async () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-z {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }"
@@ -5114,19 +5114,19 @@ test('scale-y', async () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-z {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }"
@@ -5172,19 +5172,19 @@ test('scale-z', async () => {
     }
 
     @property --tw-scale-x {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-y {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }
 
     @property --tw-scale-z {
-      syntax: "<number> | <percentage>";
+      syntax: "*";
       inherits: false;
       initial-value: 1;
     }"
@@ -7892,7 +7892,7 @@ test('space-x', async () => {
     }
 
     @property --tw-space-x-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -7943,7 +7943,7 @@ test('space-y', async () => {
     }
 
     @property --tw-space-y-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -7966,7 +7966,7 @@ test('space-x-reverse', async () => {
     }
 
     @property --tw-space-x-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -7989,7 +7989,7 @@ test('space-y-reverse', async () => {
     }
 
     @property --tw-space-y-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -8044,13 +8044,13 @@ test('divide-x', async () => {
     }
 
     @property --tw-divide-x-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-border-style {
-      syntax: "<custom-ident>";
+      syntax: "*";
       inherits: false;
       initial-value: solid;
     }"
@@ -8103,13 +8103,13 @@ test('divide-x with custom default border width', async () => {
     }
 
     @property --tw-divide-x-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-border-style {
-      syntax: "<custom-ident>";
+      syntax: "*";
       inherits: false;
       initial-value: solid;
     }"
@@ -8168,13 +8168,13 @@ test('divide-y', async () => {
     }
 
     @property --tw-divide-y-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-border-style {
-      syntax: "<custom-ident>";
+      syntax: "*";
       inherits: false;
       initial-value: solid;
     }"
@@ -8228,13 +8228,13 @@ test('divide-y with custom default border width', async () => {
     }
 
     @property --tw-divide-y-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }
 
     @property --tw-border-style {
-      syntax: "<custom-ident>";
+      syntax: "*";
       inherits: false;
       initial-value: solid;
     }"
@@ -8257,7 +8257,7 @@ test('divide-x-reverse', async () => {
     }
 
     @property --tw-divide-x-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -8280,7 +8280,7 @@ test('divide-y-reverse', async () => {
     }
 
     @property --tw-divide-y-reverse {
-      syntax: "<number>";
+      syntax: "*";
       inherits: false;
       initial-value: 0;
     }"
@@ -10339,7 +10339,7 @@ test('border with custom default border width', async () => {
     }
 
     @property --tw-border-style {
-      syntax: "<custom-ident>";
+      syntax: "*";
       inherits: false;
       initial-value: solid;
     }"
@@ -11241,19 +11241,19 @@ test('from', async () => {
     }
 
     @property --tw-gradient-from-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 0%;
     }
 
     @property --tw-gradient-via-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 50%;
     }
 
     @property --tw-gradient-to-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
     }"
@@ -11488,19 +11488,19 @@ test('via', async () => {
     }
 
     @property --tw-gradient-from-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 0%;
     }
 
     @property --tw-gradient-via-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 50%;
     }
 
     @property --tw-gradient-to-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
     }"
@@ -11721,19 +11721,19 @@ test('to', async () => {
     }
 
     @property --tw-gradient-from-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 0%;
     }
 
     @property --tw-gradient-via-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 50%;
     }
 
     @property --tw-gradient-to-position {
-      syntax: "<length> | <percentage>";
+      syntax: "<length-percentage>";
       inherits: false;
       initial-value: 100%;
     }"
@@ -15273,7 +15273,7 @@ test('outline', async () => {
     }
 
     @property --tw-outline-style {
-      syntax: "<custom-ident>";
+      syntax: "*";
       inherits: false;
       initial-value: solid;
     }"
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 9893bf0ae178..a544403025d3 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1093,9 +1093,9 @@ export function createUtilities(theme: Theme) {
 
   let translateProperties = () =>
     atRoot([
-      property('--tw-translate-x', '0', '<length> | <percentage>'),
-      property('--tw-translate-y', '0', '<length> | <percentage>'),
-      property('--tw-translate-z', '0', '<length>'),
+      property('--tw-translate-x', '0'),
+      property('--tw-translate-y', '0'),
+      property('--tw-translate-z', '0'),
     ])
 
   /**
@@ -1183,9 +1183,9 @@ export function createUtilities(theme: Theme) {
 
   let scaleProperties = () =>
     atRoot([
-      property('--tw-scale-x', '1', '<number> | <percentage>'),
-      property('--tw-scale-y', '1', '<number> | <percentage>'),
-      property('--tw-scale-z', '1', '<number> | <percentage>'),
+      property('--tw-scale-x', '1'),
+      property('--tw-scale-y', '1'),
+      property('--tw-scale-z', '1'),
     ])
 
   /**
@@ -1833,7 +1833,7 @@ export function createUtilities(theme: Theme) {
     'space-x',
     ['--space', '--spacing'],
     (value) => [
-      atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
+      atRoot([property('--tw-space-x-reverse', '0')]),
 
       styleRule(':where(& > :not(:last-child))', [
         decl('--tw-sort', 'row-gap'),
@@ -1849,7 +1849,7 @@ export function createUtilities(theme: Theme) {
     'space-y',
     ['--space', '--spacing'],
     (value) => [
-      atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
+      atRoot([property('--tw-space-y-reverse', '0')]),
       styleRule(':where(& > :not(:last-child))', [
         decl('--tw-sort', 'column-gap'),
         decl('--tw-space-y-reverse', '0'),
@@ -1861,7 +1861,7 @@ export function createUtilities(theme: Theme) {
   )
 
   staticUtility('space-x-reverse', [
-    () => atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
+    () => atRoot([property('--tw-space-x-reverse', '0')]),
     () =>
       styleRule(':where(& > :not(:last-child))', [
         decl('--tw-sort', 'row-gap'),
@@ -1870,7 +1870,7 @@ export function createUtilities(theme: Theme) {
   ])
 
   staticUtility('space-y-reverse', [
-    () => atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
+    () => atRoot([property('--tw-space-y-reverse', '0')]),
     () =>
       styleRule(':where(& > :not(:last-child))', [
         decl('--tw-sort', 'column-gap'),
@@ -2041,7 +2041,7 @@ export function createUtilities(theme: Theme) {
     }
 
     let borderProperties = () => {
-      return atRoot([property('--tw-border-style', 'solid', '<custom-ident>')])
+      return atRoot([property('--tw-border-style', 'solid')])
     }
 
     function borderSideUtility(classRoot: string, desc: BorderDescription) {
@@ -2196,7 +2196,7 @@ export function createUtilities(theme: Theme) {
         return `${value}px`
       },
       handle: (value) => [
-        atRoot([property('--tw-divide-x-reverse', '0', '<number>')]),
+        atRoot([property('--tw-divide-x-reverse', '0')]),
 
         styleRule(':where(& > :not(:last-child))', [
           decl('--tw-sort', 'divide-x-width'),
@@ -2217,7 +2217,7 @@ export function createUtilities(theme: Theme) {
         return `${value}px`
       },
       handle: (value) => [
-        atRoot([property('--tw-divide-y-reverse', '0', '<number>')]),
+        atRoot([property('--tw-divide-y-reverse', '0')]),
 
         styleRule(':where(& > :not(:last-child))', [
           decl('--tw-sort', 'divide-y-width'),
@@ -2248,12 +2248,12 @@ export function createUtilities(theme: Theme) {
     ])
 
     staticUtility('divide-x-reverse', [
-      () => atRoot([property('--tw-divide-x-reverse', '0', '<number>')]),
+      () => atRoot([property('--tw-divide-x-reverse', '0')]),
       () => styleRule(':where(& > :not(:last-child))', [decl('--tw-divide-x-reverse', '1')]),
     ])
 
     staticUtility('divide-y-reverse', [
-      () => atRoot([property('--tw-divide-y-reverse', '0', '<number>')]),
+      () => atRoot([property('--tw-divide-y-reverse', '0')]),
       () => styleRule(':where(& > :not(:last-child))', [decl('--tw-divide-y-reverse', '1')]),
     ])
 
@@ -2561,9 +2561,9 @@ export function createUtilities(theme: Theme) {
       property('--tw-gradient-to', '#0000', '<color>'),
       property('--tw-gradient-stops'),
       property('--tw-gradient-via-stops'),
-      property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
-      property('--tw-gradient-via-position', '50%', '<length> | <percentage>'),
-      property('--tw-gradient-to-position', '100%', '<length> | <percentage>'),
+      property('--tw-gradient-from-position', '0%', '<length-percentage>'),
+      property('--tw-gradient-via-position', '50%', '<length-percentage>'),
+      property('--tw-gradient-to-position', '100%', '<length-percentage>'),
     ])
   }
 
@@ -3833,7 +3833,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let outlineProperties = () => {
-      return atRoot([property('--tw-outline-style', 'solid', '<custom-ident>')])
+      return atRoot([property('--tw-outline-style', 'solid')])
     }
 
     staticUtility('outline-hidden', [

From 05cd81772aa71f1f5ba8edee72b5f935a1a8bfc5 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:33:50 -0500
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d378084a13b..e006f1195823 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,11 +15,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `--spacing-*` variables take precedence over `--container-*` variables ([#15180](https://github.com/tailwindlabs/tailwindcss/pull/15180))
 - Fix scanning classes delimited by tab characters ([#15169](https://github.com/tailwindlabs/tailwindcss/pull/15169))
 - Ensure opacity modifiers and semi-transparent gradients render correctly by default in Safari ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
+- Ensure `translate-*` utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
+- Ensure gradient stop position utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
 
 ### Changed
 
 - Interpolate gradients using OKLAB instead of OKLCH by default ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
 - Error when `layer(…)` in `@import` is not first in the list of functions/conditions ([#15109](https://github.com/tailwindlabs/tailwindcss/pull/15109))
+- Don't register custom properties with explicit types unless those custom properties need to be animateable ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
 
 ## [4.0.0-beta.2] - 2024-11-22