Add fallbacks for @property rules for Firefox (#13655)

* Add `@property` fallbacks for Firefox * Update tests * Update changelog
2025-12-08 21:36:08 +00:00 · 2024-05-08 12:39:10 -04:00 · 2024-05-08 12:39:10 -04:00 · aceec2ea39
commit aceec2ea39
parent 3a5934006a
7 changed files with 723 additions and 1 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
 - Support unbalanced parentheses and braces in quotes in arbitrary values and variants ([#13608](https://github.com/tailwindlabs/tailwindcss/pull/13608))
+- Add fallbacks for `@property` rules for Firefox ([#13655](https://github.com/tailwindlabs/tailwindcss/pull/13655))

 ## Changed

--- a/packages/tailwindcss/src/snapshots/index.test.ts.snap
+++ b/packages/tailwindcss/src/snapshots/index.test.ts.snap
@ -423,6 +423,25 @@ 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-colored: 0 0 #0000;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-colored: 0 0 #0000;
+      --tw-ring-color: ;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: ;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: ;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
+
@keyframes spin {
  to {
    transform: rotate(360deg);
--- a/packages/tailwindcss/src/snapshots/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/snapshots/utilities.test.ts.snap
@ -106,6 +106,14 @@ exports[`border-* 1`] = `
  border-color: #0000;
 }

+@supports (-moz-orient: inline) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
@property --tw-border-style {
  syntax: "<custom-ident>";
  inherits: false;
@ -219,6 +227,14 @@ 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: "<custom-ident>";
  inherits: false;
@ -332,6 +348,14 @@ 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: "<custom-ident>";
  inherits: false;
@ -445,6 +469,14 @@ 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: "<custom-ident>";
  inherits: false;
@ -558,6 +590,14 @@ 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: "<custom-ident>";
  inherits: false;
@ -671,6 +711,14 @@ 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: "<custom-ident>";
  inherits: false;
@ -784,6 +832,14 @@ 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: "<custom-ident>";
  inherits: false;
@ -929,6 +985,14 @@ exports[`border-x-* 1`] = `
  border-right-color: #0000;
 }

+@supports (-moz-orient: inline) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
@property --tw-border-style {
  syntax: "<custom-ident>";
  inherits: false;
@ -1074,6 +1138,14 @@ exports[`border-y-* 1`] = `
  border-bottom-color: #0000;
 }

+@supports (-moz-orient: inline) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
@property --tw-border-style {
  syntax: "<custom-ident>";
  inherits: false;
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@ -90,6 +90,8 @@ export function walk(
 export function toCss(ast: AstNode[]) {
  let atRoots: string = ''
  let seenAtProperties = new Set<string>()
+  let propertyFallbacksRoot: Declaration[] = []
+  let propertyFallbacksUniversal: Declaration[] = []

  function stringify(node: AstNode, depth = 0): string {
    let css = ''
@ -129,6 +131,28 @@ export function toCss(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.selector.replace(/@property\s*/g, '')
+        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 ?? ' '))
+        } else {
+          propertyFallbacksUniversal.push(decl(property, initialValue ?? ' '))
+        }
+
        seenAtProperties.add(node.selector)
      }

@ -153,6 +177,7 @@ export function toCss(ast: AstNode[]) {
  }

  let css = ''
+
  for (let node of ast) {
    let result = stringify(node)
    if (result !== '') {
@ -160,5 +185,23 @@ export function toCss(ast: AstNode[]) {
    }
  }

-  return `${css}${atRoots}`
+  let fallbackAst = []
+
+  if (propertyFallbacksRoot.length) {
+    fallbackAst.push(rule(':root', propertyFallbacksRoot))
+  }
+
+  if (propertyFallbacksUniversal.length) {
+    fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
+  }
+
+  let fallback = ''
+
+  if (fallbackAst.length) {
+    fallback = stringify(
+      rule('@supports (-moz-orient: inline)', [rule('@layer base', fallbackAst)]),
+    )
+  }
+
+  return `${css}${fallback}${atRoots}`
 }
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@ -211,6 +211,16 @@ 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);
@ -257,6 +267,14 @@ describe('@apply', () => {
        content: var(--tw-content);
      }

+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+
      @property --tw-content {
        syntax: "*";
        inherits: false;
@ -372,6 +390,14 @@ describe('variant stacking', () => {
        display: flex;
      }

+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+
      @property --tw-content {
        syntax: "*";
        inherits: false;
@ -538,6 +564,14 @@ describe('sorting', () => {
        margin-inline-end: calc(var(--spacing-2, .5rem) * 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: "<number>";
        inherits: false;
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@ -2204,6 +2204,15 @@ test('border-spacing', () => {
      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;
@ -2245,6 +2254,15 @@ test('border-spacing-x', () => {
      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;
@ -2286,6 +2304,15 @@ test('border-spacing-y', () => {
      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;
@ -2472,6 +2499,16 @@ test('translate', () => {
      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: "<length-percentage>";
      inherits: false;
@ -2516,6 +2553,16 @@ test('translate-x', () => {
        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: "<length-percentage>";
        inherits: false;
@ -2560,6 +2607,16 @@ test('translate-y', () => {
        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: "<length-percentage>";
        inherits: false;
@ -2593,6 +2650,16 @@ test('translate-z', () => {
      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: "<length-percentage>";
      inherits: false;
@ -2622,6 +2689,16 @@ test('translate-3d', () => {
      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: "<length-percentage>";
      inherits: false;
@ -2682,6 +2759,18 @@ test('rotate-x', () => {
      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: "<transform-function>";
      inherits: false;
@ -2732,6 +2821,18 @@ test('rotate-y', () => {
      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: "<transform-function>";
      inherits: false;
@ -2785,6 +2886,18 @@ test('skew', () => {
      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: "<transform-function>";
      inherits: false;
@ -2835,6 +2948,18 @@ test('skew-x', () => {
      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: "<transform-function>";
      inherits: false;
@ -2885,6 +3010,18 @@ test('skew-y', () => {
      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: "<transform-function>";
      inherits: false;
@ -2942,6 +3079,16 @@ test('scale', () => {
      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: "<number> | <percentage>";
      inherits: false;
@ -2969,6 +3116,16 @@ test('scale-3d', () => {
      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: "<number> | <percentage>";
      inherits: false;
@ -3007,6 +3164,16 @@ test('scale-x', () => {
      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: "<number> | <percentage>";
      inherits: false;
@ -3038,6 +3205,16 @@ test('scale-x', () => {
      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: "<number> | <percentage>";
      inherits: false;
@ -3076,6 +3253,16 @@ test('scale-y', () => {
      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: "<number> | <percentage>";
      inherits: false;
@ -3114,6 +3301,16 @@ test('scale-z', () => {
      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: "<number> | <percentage>";
      inherits: false;
@ -3165,6 +3362,18 @@ test('transform', () => {
      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: "<transform-function>";
      inherits: false;
@ -3594,6 +3803,16 @@ test('touch-pan', () => {
      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: ;
+          --tw-pan-y: ;
+          --tw-pinch-zoom: ;
+        }
+      }
+    }
+
    @property --tw-pan-x {
      syntax: "*";
      inherits: false
@ -3628,6 +3847,16 @@ test('touch-pinch-zoom', () => {
      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: ;
+          --tw-pan-y: ;
+          --tw-pinch-zoom: ;
+        }
+      }
+    }
+
    @property --tw-pan-x {
      syntax: "*";
      inherits: false
@ -3710,6 +3939,14 @@ test('scroll-snap-type', () => {
      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;
@ -3729,6 +3966,14 @@ test('--tw-scroll-snap-strictness', () => {
      --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;
@ -5311,6 +5556,14 @@ test('space-x', () => {
      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: "<number>";
      inherits: false;
@ -5351,6 +5604,14 @@ test('space-y', () => {
      margin-bottom: 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: "<number>";
      inherits: false;
@ -5366,6 +5627,14 @@ test('space-x-reverse', () => {
      --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: "<number>";
      inherits: false;
@ -5381,6 +5650,14 @@ test('space-y-reverse', () => {
      --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: "<number>";
      inherits: false;
@ -5423,6 +5700,15 @@ test('divide-x', () => {
      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: "<number>";
      inherits: false;
@ -5460,6 +5746,15 @@ test('divide-x with custom default border width', () => {
      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: "<number>";
      inherits: false;
@ -5511,6 +5806,15 @@ test('divide-y', () => {
      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: "<number>";
      inherits: false;
@ -5549,6 +5853,15 @@ test('divide-y with custom default border width', () => {
      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: "<number>";
      inherits: false;
@ -5569,6 +5882,14 @@ test('divide-x-reverse', () => {
      --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: "<number>";
      inherits: false;
@ -5584,6 +5905,14 @@ test('divide-y-reverse', () => {
      --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: "<number>";
      inherits: false;
@ -7291,6 +7620,14 @@ test('border with custom default border width', () => {
      border-width: 2px;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-border-style: solid;
+        }
+      }
+    }
+
    @property --tw-border-style {
      syntax: "<custom-ident>";
      inherits: false;
@ -7808,6 +8145,21 @@ test('from', () => {
      --tw-gradient-from-position: var(--my-position);
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-gradient-from: #0000;
+          --tw-gradient-to: #0000;
+          --tw-gradient-via: transparent;
+          --tw-gradient-stops: ;
+          --tw-gradient-via-stops: ;
+          --tw-gradient-from-position: 0%;
+          --tw-gradient-via-position: 50%;
+          --tw-gradient-to-position: 100%;
+        }
+      }
+    }
+
    @property --tw-gradient-from {
      syntax: "<color>";
      inherits: false;
@ -8030,6 +8382,21 @@ test('via', () => {
      --tw-gradient-via-position: var(--my-position);
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-gradient-from: #0000;
+          --tw-gradient-to: #0000;
+          --tw-gradient-via: transparent;
+          --tw-gradient-stops: ;
+          --tw-gradient-via-stops: ;
+          --tw-gradient-from-position: 0%;
+          --tw-gradient-via-position: 50%;
+          --tw-gradient-to-position: 100%;
+        }
+      }
+    }
+
    @property --tw-gradient-from {
      syntax: "<color>";
      inherits: false;
@ -8240,6 +8607,21 @@ test('to', () => {
      --tw-gradient-to-position: var(--my-position);
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-gradient-from: #0000;
+          --tw-gradient-to: #0000;
+          --tw-gradient-via: transparent;
+          --tw-gradient-stops: ;
+          --tw-gradient-via-stops: ;
+          --tw-gradient-from-position: 0%;
+          --tw-gradient-via-position: 50%;
+          --tw-gradient-to-position: 100%;
+        }
+      }
+    }
+
    @property --tw-gradient-from {
      syntax: "<color>";
      inherits: false;
@ -9998,6 +10380,22 @@ test('filter', () => {
      filter: none;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-blur: ;
+          --tw-brightness: ;
+          --tw-contrast: ;
+          --tw-grayscale: ;
+          --tw-hue-rotate: ;
+          --tw-invert: ;
+          --tw-opacity: ;
+          --tw-saturate: ;
+          --tw-sepia: ;
+        }
+      }
+    }
+
    @property --tw-blur {
      syntax: "*";
      inherits: false
@ -10285,6 +10683,22 @@ test('backdrop-filter', () => {
      backdrop-filter: none;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-backdrop-blur: ;
+          --tw-backdrop-brightness: ;
+          --tw-backdrop-contrast: ;
+          --tw-backdrop-grayscale: ;
+          --tw-backdrop-hue-rotate: ;
+          --tw-backdrop-invert: ;
+          --tw-backdrop-opacity: ;
+          --tw-backdrop-saturate: ;
+          --tw-backdrop-sepia: ;
+        }
+      }
+    }
+
    @property --tw-backdrop-blur {
      syntax: "*";
      inherits: false
@ -10639,6 +11053,17 @@ test('contain', () => {
      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: ;
+          --tw-contain-layout: ;
+          --tw-contain-paint: ;
+          --tw-contain-style: ;
+        }
+      }
+    }
+
    @property --tw-contain-size {
      syntax: "*";
      inherits: false
@ -10668,6 +11093,14 @@ test('content', () => {
      content: var(--tw-content);
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
    @property --tw-content {
      syntax: "*";
      inherits: false;
@ -10841,6 +11274,18 @@ test('font-variant-numeric', () => {
      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: ;
+          --tw-slashed-zero: ;
+          --tw-numeric-figure: ;
+          --tw-numeric-spacing: ;
+          --tw-numeric-fraction: ;
+        }
+      }
+    }
+
    @property --tw-ordinal {
      syntax: "*";
      inherits: false
@ -11054,6 +11499,14 @@ test('outline', () => {
      outline-style: solid;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-outline-style: solid;
+        }
+      }
+    }
+
    @property --tw-outline-style {
      syntax: "<custom-ident>";
      inherits: false;
@ -11543,6 +11996,25 @@ test('shadow', () => {
      --tw-shadow: var(--tw-shadow-colored);
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-colored: 0 0 #0000;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-colored: 0 0 #0000;
+          --tw-ring-color: ;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: ;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: ;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
    @property --tw-shadow {
      syntax: "*";
      inherits: false;
@ -11776,6 +12248,25 @@ test('inset-shadow', () => {
      --tw-inset-shadow: var(--tw-inset-shadow-colored);
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-colored: 0 0 #0000;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-colored: 0 0 #0000;
+          --tw-ring-color: ;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: ;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: ;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
    @property --tw-shadow {
      syntax: "*";
      inherits: false;
@ -12005,6 +12496,25 @@ test('ring', () => {
      --tw-ring-inset: inset;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-colored: 0 0 #0000;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-colored: 0 0 #0000;
+          --tw-ring-color: ;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: ;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: ;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
    @property --tw-shadow {
      syntax: "*";
      inherits: false;
@ -12235,6 +12745,25 @@ test('inset-ring', () => {
      --tw-inset-ring-color: transparent;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-shadow: 0 0 #0000;
+          --tw-shadow-colored: 0 0 #0000;
+          --tw-inset-shadow: 0 0 #0000;
+          --tw-inset-shadow-colored: 0 0 #0000;
+          --tw-ring-color: ;
+          --tw-ring-shadow: 0 0 #0000;
+          --tw-inset-ring-color: ;
+          --tw-inset-ring-shadow: 0 0 #0000;
+          --tw-ring-inset: ;
+          --tw-ring-offset-width: 0px;
+          --tw-ring-offset-color: #fff;
+          --tw-ring-offset-shadow: 0 0 #0000;
+        }
+      }
+    }
+
    @property --tw-shadow {
      syntax: "*";
      inherits: false;
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@ -82,6 +82,14 @@ test('before', () => {
      display: flex;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
    @property --tw-content {
      syntax: "*";
      inherits: false;
@ -97,6 +105,14 @@ test('after', () => {
      display: flex;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
    @property --tw-content {
      syntax: "*";
      inherits: false;
@ -2100,6 +2116,14 @@ test('variant order', () => {
      display: flex;
    }

+    @supports (-moz-orient: inline) {
+      @layer base {
+        *, :before, :after, ::backdrop {
+          --tw-content: "";
+        }
+      }
+    }
+
    @property --tw-content {
      syntax: "*";
      inherits: false;