From 2de644b20e202354e96d51f0e732408442994dcc Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 14 Jan 2025 15:51:44 +0100
Subject: [PATCH] Remove `@property` fallbacks for Firefox (#15622)

This PR removes the `@property` fallbacks added in #13655. This is
possible because we're targeting a minimum Firefox version of 128 which
[includes support for \`@property\`
rules](https://developer.mozilla.org/de/docs/Web/CSS/@property).

<img width="1284" alt="Screenshot 2025-01-14 at 11 36 44"
src="https://github.com/user-attachments/assets/ae070781-35c1-4165-be51-baa63f28db5b"
/>
---
 CHANGELOG.md                                  |   1 +
 integrations/cli/index.test.ts                |  21 -
 integrations/postcss/index.test.ts            |  21 -
 .../src/__snapshots__/index.test.ts.snap      |   8 -
 .../src/__snapshots__/index.test.ts.snap      |  19 -
 .../src/__snapshots__/utilities.test.ts.snap  |  72 --
 packages/tailwindcss/src/ast.ts               |  43 --
 .../tailwindcss/src/compat/config.test.ts     |   7 -
 packages/tailwindcss/src/index.test.ts        |  61 --
 packages/tailwindcss/src/utilities.test.ts    | 623 ------------------
 packages/tailwindcss/src/variants.test.ts     |  24 -
 11 files changed, 1 insertion(+), 899 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fccc256d7..cdb305182 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Remove `--container-prose` in favor of a deprecated `--max-width-prose` theme variable so that `*-prose` is only available for max-width utilities and only for backward compatibility ([#15439](https://github.com/tailwindlabs/tailwindcss/pull/15439))
 - Use Vite post-processor APIs for processing Svelte `<style>` blocks ([#15436](https://github.com/tailwindlabs/tailwindcss/pull/15436))
+- Remove `@property` fallback rules for Firefox ([#15622](https://github.com/tailwindlabs/tailwindcss/pull/15622))
 
 ## [4.0.0-beta.8] - 2024-12-17
 
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index a16206171..324492adb 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -530,13 +530,6 @@ test(
         --tw-content: "src/nested/index.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -775,13 +768,6 @@ test(
         --tw-content: 'project-e/nested/index.html';
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -981,13 +967,6 @@ test(
         --tw-content: "pages/nested/foo.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
diff --git a/integrations/postcss/index.test.ts b/integrations/postcss/index.test.ts
index 4da70ee1f..1c8d1c301 100644
--- a/integrations/postcss/index.test.ts
+++ b/integrations/postcss/index.test.ts
@@ -761,13 +761,6 @@ test(
         --tw-content: "src/nested/index.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -997,13 +990,6 @@ test(
         --tw-content: 'project-d/src/index.html';
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -1227,13 +1213,6 @@ test(
         --tw-content: "pages/nested/foo.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 74ddc7697..2dcb76ba5 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -630,14 +630,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
-    }
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 4ba8218df..5c7fedca0 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -387,25 +387,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   }
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index c8e1a1137..588311cf9 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -118,14 +118,6 @@ exports[`border-* 1`] = `
   border-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -251,14 +243,6 @@ exports[`border-b-* 1`] = `
   border-bottom-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -384,14 +368,6 @@ exports[`border-e-* 1`] = `
   border-inline-end-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -517,14 +493,6 @@ exports[`border-l-* 1`] = `
   border-left-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -650,14 +618,6 @@ exports[`border-r-* 1`] = `
   border-right-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -783,14 +743,6 @@ exports[`border-s-* 1`] = `
   border-inline-start-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -916,14 +868,6 @@ exports[`border-t-* 1`] = `
   border-top-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1049,14 +993,6 @@ exports[`border-x-* 1`] = `
   border-inline-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1182,14 +1118,6 @@ exports[`border-y-* 1`] = `
   border-block-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 28d89a87c..ae52098be 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -240,8 +240,6 @@ export function walkDepth(
 export function optimizeAst(ast: AstNode[]) {
   let atRoots: AstNode[] = []
   let seenAtProperties = new Set<string>()
-  let propertyFallbacksRoot: Declaration[] = []
-  let propertyFallbacksUniversal: Declaration[] = []
 
   function transform(
     node: AstNode,
@@ -272,28 +270,6 @@ export function optimizeAst(ast: AstNode[]) {
         return
       }
 
-      // Collect fallbacks for `@property` rules for Firefox support
-      // We turn these into rules on `:root` or `*` and some pseudo-elements
-      // based on the value of `inherits``
-      let property = node.params
-      let initialValue = null
-      let inherits = false
-
-      for (let prop of node.nodes) {
-        if (prop.kind !== 'declaration') continue
-        if (prop.property === 'initial-value') {
-          initialValue = prop.value
-        } else if (prop.property === 'inherits') {
-          inherits = prop.value === 'true'
-        }
-      }
-
-      if (inherits) {
-        propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
-      } else {
-        propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
-      }
-
       seenAtProperties.add(node.params)
 
       let copy = { ...node, nodes: [] }
@@ -351,25 +327,6 @@ export function optimizeAst(ast: AstNode[]) {
     transform(node, newAst, 0)
   }
 
-  // Fallbacks
-  {
-    let fallbackAst = []
-
-    if (propertyFallbacksRoot.length > 0) {
-      fallbackAst.push(rule(':root', propertyFallbacksRoot))
-    }
-
-    if (propertyFallbacksUniversal.length > 0) {
-      fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
-    }
-
-    if (fallbackAst.length > 0) {
-      newAst.push(
-        atRule('@supports', '(-moz-orient: inline)', [atRule('@layer', 'base', fallbackAst)]),
-      )
-    }
-  }
-
   return newAst.concat(atRoots)
 }
 
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 2d0ee4b7a..ff21abc55 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -352,13 +352,6 @@ describe('theme callbacks', () => {
           --tw-leading: 201rem;
           line-height: 201rem;
         }
-        @supports (-moz-orient: inline) {
-          @layer base {
-            *, ::before, ::after, ::backdrop {
-              --tw-leading: initial;
-            }
-          }
-        }
         @property --tw-leading {
           syntax: "*";
           inherits: false;
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 89ddceb10..f34949cca 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -285,16 +285,6 @@ describe('@apply', () => {
         }
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-translate-x: 0;
-            --tw-translate-y: 0;
-            --tw-translate-z: 0;
-          }
-        }
-      }
-
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -369,14 +359,6 @@ describe('@apply', () => {
         content: var(--tw-content);
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -582,14 +564,6 @@ describe('variant stacking', () => {
         }
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
-
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -755,14 +729,6 @@ describe('sorting', () => {
         margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse)));
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-space-x-reverse: 0;
-          }
-        }
-      }
-
       @property --tw-space-x-reverse {
         syntax: "*";
         inherits: false;
@@ -1318,14 +1284,6 @@ describe('Parsing themes values from CSS', () => {
         font-weight: var(--font-weight-bold);
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-font-weight: initial;
-          }
-        }
-      }
-
       @property --tw-font-weight {
         syntax: "*";
         inherits: false
@@ -1365,25 +1323,6 @@ describe('Parsing themes values from CSS', () => {
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-shadow: 0 0 #0000;
-            --tw-shadow-color: initial;
-            --tw-inset-shadow: 0 0 #0000;
-            --tw-inset-shadow-color: initial;
-            --tw-ring-color: initial;
-            --tw-ring-shadow: 0 0 #0000;
-            --tw-inset-ring-color: initial;
-            --tw-inset-ring-shadow: 0 0 #0000;
-            --tw-ring-inset: initial;
-            --tw-ring-offset-width: 0px;
-            --tw-ring-offset-color: #fff;
-            --tw-ring-offset-shadow: 0 0 #0000;
-          }
-        }
-      }
-
       @property --tw-shadow {
         syntax: "*";
         inherits: false;
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index aa3abdd6d..0951c36f5 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -188,25 +188,6 @@ test('inset', async () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
     @property --tw-shadow {
       syntax: "*";
       inherits: false;
@@ -3639,15 +3620,6 @@ test('border-spacing', async () => {
       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
-        }
-      }
-    }
-
     @property --tw-border-spacing-x {
       syntax: "<length>";
       inherits: false;
@@ -3697,15 +3669,6 @@ test('border-spacing-x', async () => {
       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
-        }
-      }
-    }
-
     @property --tw-border-spacing-x {
       syntax: "<length>";
       inherits: false;
@@ -3755,15 +3718,6 @@ test('border-spacing-y', async () => {
       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
-        }
-      }
-    }
-
     @property --tw-border-spacing-x {
       syntax: "<length>";
       inherits: false;
@@ -3985,16 +3939,6 @@ test('translate', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4058,16 +4002,6 @@ test('translate-x', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4135,16 +4069,6 @@ test('translate-x', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4206,16 +4130,6 @@ test('translate-y', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4283,16 +4197,6 @@ test('translate-y', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4337,16 +4241,6 @@ test('translate-z', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4387,16 +4281,6 @@ test('translate-3d', async () => {
       translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
-        }
-      }
-    }
-
     @property --tw-translate-x {
       syntax: "*";
       inherits: false;
@@ -4468,18 +4352,6 @@ test('rotate-x', async () => {
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: rotateX(0);
-          --tw-rotate-y: rotateY(0);
-          --tw-rotate-z: rotateZ(0);
-          --tw-skew-x: skewX(0);
-          --tw-skew-y: skewY(0);
-        }
-      }
-    }
-
     @property --tw-rotate-x {
       syntax: "*";
       inherits: false;
@@ -4546,18 +4418,6 @@ test('rotate-y', async () => {
         transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-rotate-x: rotateX(0);
-            --tw-rotate-y: rotateY(0);
-            --tw-rotate-z: rotateZ(0);
-            --tw-skew-x: skewX(0);
-            --tw-skew-y: skewY(0);
-          }
-        }
-      }
-
       @property --tw-rotate-x {
         syntax: "*";
         inherits: false;
@@ -4624,18 +4484,6 @@ test('rotate-z', async () => {
         transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
       }
 
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-rotate-x: rotateX(0);
-            --tw-rotate-y: rotateY(0);
-            --tw-rotate-z: rotateZ(0);
-            --tw-skew-x: skewX(0);
-            --tw-skew-y: skewY(0);
-          }
-        }
-      }
-
       @property --tw-rotate-x {
         syntax: "*";
         inherits: false;
@@ -4699,18 +4547,6 @@ test('skew', async () => {
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: rotateX(0);
-          --tw-rotate-y: rotateY(0);
-          --tw-rotate-z: rotateZ(0);
-          --tw-skew-x: skewX(0);
-          --tw-skew-y: skewY(0);
-        }
-      }
-    }
-
     @property --tw-rotate-x {
       syntax: "*";
       inherits: false;
@@ -4770,18 +4606,6 @@ test('skew-x', async () => {
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: rotateX(0);
-          --tw-rotate-y: rotateY(0);
-          --tw-rotate-z: rotateZ(0);
-          --tw-skew-x: skewX(0);
-          --tw-skew-y: skewY(0);
-        }
-      }
-    }
-
     @property --tw-rotate-x {
       syntax: "*";
       inherits: false;
@@ -4841,18 +4665,6 @@ test('skew-y', async () => {
       transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: rotateX(0);
-          --tw-rotate-y: rotateY(0);
-          --tw-rotate-z: rotateZ(0);
-          --tw-skew-x: skewX(0);
-          --tw-skew-y: skewY(0);
-        }
-      }
-    }
-
     @property --tw-rotate-x {
       syntax: "*";
       inherits: false;
@@ -4920,16 +4732,6 @@ test('scale', async () => {
         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;
-          }
-        }
-      }
-
       @property --tw-scale-x {
         syntax: "*";
         inherits: false;
@@ -4968,16 +4770,6 @@ test('scale-3d', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
     }
 
-    @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: "*";
       inherits: false;
@@ -5016,16 +4808,6 @@ test('scale-x', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    @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: "*";
       inherits: false;
@@ -5057,16 +4839,6 @@ test('scale-x', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    @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: "*";
       inherits: false;
@@ -5117,16 +4889,6 @@ test('scale-y', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    @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: "*";
       inherits: false;
@@ -5175,16 +4937,6 @@ test('scale-z', async () => {
       scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
     }
 
-    @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: "*";
       inherits: false;
@@ -5245,18 +4997,6 @@ test('transform', async () => {
       transform: none;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-rotate-x: rotateX(0);
-          --tw-rotate-y: rotateY(0);
-          --tw-rotate-z: rotateZ(0);
-          --tw-skew-x: skewX(0);
-          --tw-skew-y: skewY(0);
-        }
-      }
-    }
-
     @property --tw-rotate-x {
       syntax: "*";
       inherits: false;
@@ -5765,16 +5505,6 @@ test('touch-pan', async () => {
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-pan-x: initial;
-          --tw-pan-y: initial;
-          --tw-pinch-zoom: initial;
-        }
-      }
-    }
-
     @property --tw-pan-x {
       syntax: "*";
       inherits: false
@@ -5815,16 +5545,6 @@ test('touch-pinch-zoom', async () => {
       touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-pan-x: initial;
-          --tw-pan-y: initial;
-          --tw-pinch-zoom: initial;
-        }
-      }
-    }
-
     @property --tw-pan-x {
       syntax: "*";
       inherits: false
@@ -5930,14 +5650,6 @@ test('scroll-snap-type', async () => {
       scroll-snap-type: y var(--tw-scroll-snap-strictness);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scroll-snap-strictness: proximity;
-        }
-      }
-    }
-
     @property --tw-scroll-snap-strictness {
       syntax: "*";
       inherits: false;
@@ -5968,14 +5680,6 @@ test('--tw-scroll-snap-strictness', async () => {
       --tw-scroll-snap-strictness: proximity;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scroll-snap-strictness: proximity;
-        }
-      }
-    }
-
     @property --tw-scroll-snap-strictness {
       syntax: "*";
       inherits: false;
@@ -7870,14 +7574,6 @@ test('space-x', async () => {
       margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse)));
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-x-reverse: 0;
-        }
-      }
-    }
-
     @property --tw-space-x-reverse {
       syntax: "*";
       inherits: false;
@@ -7921,14 +7617,6 @@ test('space-y', async () => {
       margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse)));
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-y-reverse: 0;
-        }
-      }
-    }
-
     @property --tw-space-y-reverse {
       syntax: "*";
       inherits: false;
@@ -7944,14 +7632,6 @@ test('space-x-reverse', async () => {
       --tw-space-x-reverse: 1;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-x-reverse: 0;
-        }
-      }
-    }
-
     @property --tw-space-x-reverse {
       syntax: "*";
       inherits: false;
@@ -7967,14 +7647,6 @@ test('space-y-reverse', async () => {
       --tw-space-y-reverse: 1;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-y-reverse: 0;
-        }
-      }
-    }
-
     @property --tw-space-y-reverse {
       syntax: "*";
       inherits: false;
@@ -8021,15 +7693,6 @@ test('divide-x', async () => {
       border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-          --tw-border-style: solid;
-        }
-      }
-    }
-
     @property --tw-divide-x-reverse {
       syntax: "*";
       inherits: false;
@@ -8080,15 +7743,6 @@ test('divide-x with custom default border width', async () => {
       border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-          --tw-border-style: solid;
-        }
-      }
-    }
-
     @property --tw-divide-x-reverse {
       syntax: "*";
       inherits: false;
@@ -8145,15 +7799,6 @@ test('divide-y', async () => {
       border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-          --tw-border-style: solid;
-        }
-      }
-    }
-
     @property --tw-divide-y-reverse {
       syntax: "*";
       inherits: false;
@@ -8205,15 +7850,6 @@ test('divide-y with custom default border width', async () => {
       border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-          --tw-border-style: solid;
-        }
-      }
-    }
-
     @property --tw-divide-y-reverse {
       syntax: "*";
       inherits: false;
@@ -8235,14 +7871,6 @@ test('divide-x-reverse', async () => {
       --tw-divide-x-reverse: 1;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-        }
-      }
-    }
-
     @property --tw-divide-x-reverse {
       syntax: "*";
       inherits: false;
@@ -8258,14 +7886,6 @@ test('divide-y-reverse', async () => {
       --tw-divide-y-reverse: 1;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-        }
-      }
-    }
-
     @property --tw-divide-y-reverse {
       syntax: "*";
       inherits: false;
@@ -10317,14 +9937,6 @@ test('border with custom default border width', async () => {
       border-width: 2px;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-style: solid;
-        }
-      }
-    }
-
     @property --tw-border-style {
       syntax: "*";
       inherits: false;
@@ -11178,22 +10790,6 @@ test('from', async () => {
       --tw-gradient-from-position: var(--my-position);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-gradient-position: initial;
-          --tw-gradient-from: #0000;
-          --tw-gradient-via: #0000;
-          --tw-gradient-to: #0000;
-          --tw-gradient-stops: initial;
-          --tw-gradient-via-stops: initial;
-          --tw-gradient-from-position: 0%;
-          --tw-gradient-via-position: 50%;
-          --tw-gradient-to-position: 100%;
-        }
-      }
-    }
-
     @property --tw-gradient-position {
       syntax: "*";
       inherits: false
@@ -11425,22 +11021,6 @@ test('via', async () => {
       --tw-gradient-via-position: var(--my-position);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-gradient-position: initial;
-          --tw-gradient-from: #0000;
-          --tw-gradient-via: #0000;
-          --tw-gradient-to: #0000;
-          --tw-gradient-stops: initial;
-          --tw-gradient-via-stops: initial;
-          --tw-gradient-from-position: 0%;
-          --tw-gradient-via-position: 50%;
-          --tw-gradient-to-position: 100%;
-        }
-      }
-    }
-
     @property --tw-gradient-position {
       syntax: "*";
       inherits: false
@@ -11658,22 +11238,6 @@ test('to', async () => {
       --tw-gradient-to-position: var(--my-position);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-gradient-position: initial;
-          --tw-gradient-from: #0000;
-          --tw-gradient-via: #0000;
-          --tw-gradient-to: #0000;
-          --tw-gradient-stops: initial;
-          --tw-gradient-via-stops: initial;
-          --tw-gradient-from-position: 0%;
-          --tw-gradient-via-position: 50%;
-          --tw-gradient-to-position: 100%;
-        }
-      }
-    }
-
     @property --tw-gradient-position {
       syntax: "*";
       inherits: false
@@ -13071,14 +12635,6 @@ test('font', async () => {
       font-weight: var(--font-weight-bold);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-font-weight: initial;
-        }
-      }
-    }
-
     @property --tw-font-weight {
       syntax: "*";
       inherits: false
@@ -13804,22 +13360,6 @@ test('filter', async () => {
       filter: none;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-blur: initial;
-          --tw-brightness: initial;
-          --tw-contrast: initial;
-          --tw-grayscale: initial;
-          --tw-hue-rotate: initial;
-          --tw-invert: initial;
-          --tw-opacity: initial;
-          --tw-saturate: initial;
-          --tw-sepia: initial;
-        }
-      }
-    }
-
     @property --tw-blur {
       syntax: "*";
       inherits: false
@@ -14181,22 +13721,6 @@ test('backdrop-filter', async () => {
       backdrop-filter: none;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-backdrop-blur: initial;
-          --tw-backdrop-brightness: initial;
-          --tw-backdrop-contrast: initial;
-          --tw-backdrop-grayscale: initial;
-          --tw-backdrop-hue-rotate: initial;
-          --tw-backdrop-invert: initial;
-          --tw-backdrop-opacity: initial;
-          --tw-backdrop-saturate: initial;
-          --tw-backdrop-sepia: initial;
-        }
-      }
-    }
-
     @property --tw-backdrop-blur {
       syntax: "*";
       inherits: false
@@ -14527,14 +14051,6 @@ test('duration', async () => {
       transition-duration: .3s;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-duration: initial;
-        }
-      }
-    }
-
     @property --tw-duration {
       syntax: "*";
       inherits: false
@@ -14586,14 +14102,6 @@ test('ease', async () => {
       transition-timing-function: var(--ease-out);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
-        }
-      }
-    }
-
     @property --tw-ease {
       syntax: "*";
       inherits: false
@@ -14713,17 +14221,6 @@ test('contain', async () => {
       contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-contain-size: initial;
-          --tw-contain-layout: initial;
-          --tw-contain-paint: initial;
-          --tw-contain-style: initial;
-        }
-      }
-    }
-
     @property --tw-contain-size {
       syntax: "*";
       inherits: false
@@ -14766,14 +14263,6 @@ test('content', async () => {
       content: var(--tw-content);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
     @property --tw-content {
       syntax: "*";
       inherits: false;
@@ -14842,14 +14331,6 @@ test('leading', async () => {
       line-height: var(--leading-tight);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-leading: initial;
-        }
-      }
-    }
-
     @property --tw-leading {
       syntax: "*";
       inherits: false
@@ -14906,14 +14387,6 @@ test('tracking', async () => {
       letter-spacing: var(--tracking-wide);
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-tracking: initial;
-        }
-      }
-    }
-
     @property --tw-tracking {
       syntax: "*";
       inherits: false
@@ -15010,18 +14483,6 @@ test('font-variant-numeric', async () => {
       font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ordinal: initial;
-          --tw-slashed-zero: initial;
-          --tw-numeric-figure: initial;
-          --tw-numeric-spacing: initial;
-          --tw-numeric-fraction: initial;
-        }
-      }
-    }
-
     @property --tw-ordinal {
       syntax: "*";
       inherits: false
@@ -15252,14 +14713,6 @@ test('outline', async () => {
       outline-style: solid;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-outline-style: solid;
-        }
-      }
-    }
-
     @property --tw-outline-style {
       syntax: "*";
       inherits: false;
@@ -15816,25 +15269,6 @@ test('shadow', async () => {
       --tw-shadow-color: transparent;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
     @property --tw-shadow {
       syntax: "*";
       inherits: false;
@@ -16059,25 +15493,6 @@ test('inset-shadow', async () => {
       --tw-inset-shadow-color: transparent;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
     @property --tw-shadow {
       syntax: "*";
       inherits: false;
@@ -16320,25 +15735,6 @@ test('ring', async () => {
       --tw-ring-inset: inset;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
     @property --tw-shadow {
       syntax: "*";
       inherits: false;
@@ -16591,25 +15987,6 @@ test('inset-ring', async () => {
       --tw-inset-ring-color: transparent;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-ring-color: initial;
-          --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: initial;
-          --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: initial;
-          --tw-ring-offset-width: 0px;
-          --tw-ring-offset-color: #fff;
-          --tw-ring-offset-shadow: 0 0 #0000;
-        }
-      }
-    }
-
     @property --tw-shadow {
       syntax: "*";
       inherits: false;
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 16dd2c277..8ee60ec80 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -111,14 +111,6 @@ test('before', async () => {
       display: flex;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
     @property --tw-content {
       syntax: "*";
       inherits: false;
@@ -135,14 +127,6 @@ test('after', async () => {
       display: flex;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
     @property --tw-content {
       syntax: "*";
       inherits: false;
@@ -2314,14 +2298,6 @@ test('variant order', async () => {
       display: flex;
     }
 
-    @supports (-moz-orient: inline) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
-        }
-      }
-    }
-
     @property --tw-content {
       syntax: "*";
       inherits: false;