diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index a4d9a400c243..108402f83cae 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -1,10 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-font-weight: initial;
+      }
     }
   }
 }
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 48a2e9a5dad8..16f92fb5ebd2 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -1,23 +1,25 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --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;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-shadow: 0 0 #0000;
+        --tw-shadow-color: initial;
+        --tw-shadow-alpha: 100%;
+        --tw-inset-shadow: 0 0 #0000;
+        --tw-inset-shadow-color: initial;
+        --tw-inset-shadow-alpha: 100%;
+        --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;
+      }
     }
   }
 }
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 6318b7aad0c9..08152d4144e7 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -1,10 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`border-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -175,10 +177,12 @@ exports[`border-* 1`] = `
 `;
 
 exports[`border-b-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -349,10 +353,12 @@ exports[`border-b-* 1`] = `
 `;
 
 exports[`border-e-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -523,10 +529,12 @@ exports[`border-e-* 1`] = `
 `;
 
 exports[`border-l-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -697,10 +705,12 @@ exports[`border-l-* 1`] = `
 `;
 
 exports[`border-r-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -871,10 +881,12 @@ exports[`border-r-* 1`] = `
 `;
 
 exports[`border-s-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -1045,10 +1057,12 @@ exports[`border-s-* 1`] = `
 `;
 
 exports[`border-t-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -1219,10 +1233,12 @@ exports[`border-t-* 1`] = `
 `;
 
 exports[`border-x-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
@@ -1393,10 +1409,12 @@ exports[`border-x-* 1`] = `
 `;
 
 exports[`border-y-* 1`] = `
-"@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
+"@layer __tw-properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    @layer base {
+      *, :before, :after, ::backdrop {
+        --tw-border-style: solid;
+      }
     }
   }
 }
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 3a086a193968..28341ebf7066 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -582,18 +582,22 @@ export function optimizeAst(
     }
 
     if (fallbackAst.length > 0) {
-      let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment')
-      if (firstNonCommentIndex === -1) firstNonCommentIndex = 0
-      newAst.splice(
-        firstNonCommentIndex,
-        0,
-        atRule(
-          '@supports',
-          // We can't write a supports query for `@property` directly so we have to test for
-          // features that are added around the same time in Mozilla and Safari.
-          '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
-          [rule('@layer base', fallbackAst)],
-        ),
+      // Inject `@layer __tw-properties;` at the top, such that external
+      // `@import url(…)` can still be placed after it.
+      newAst.unshift(atRule('@layer', '__tw-properties'))
+
+      // Inject the `@layer __tw-properties { … }` at the end with all the
+      // fallbacks.
+      newAst.push(
+        atRule('@layer', '__tw-properties', [
+          atRule(
+            '@supports',
+            // We can't write a supports query for `@property` directly so we have to test for
+            // features that are added around the same time in Mozilla and Safari.
+            '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
+            [rule('@layer base', fallbackAst)],
+          ),
+        ]),
       )
     }
   }
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 8cc87d9bb4c3..98e8c340e7ba 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -322,13 +322,7 @@ describe('theme callbacks', () => {
 
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
-        "@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-          @layer base {
-            *, ::before, ::after, ::backdrop {
-              --tw-leading: initial;
-            }
-          }
-        }
+        "@layer __tw-properties;
         .prose {
           [class~=lead-base] {
             font-size: 100rem;
@@ -355,6 +349,15 @@ describe('theme callbacks', () => {
           --tw-leading: 201rem;
           line-height: 201rem;
         }
+        @layer __tw-properties {
+          @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+            @layer base {
+              *, ::before, ::after, ::backdrop {
+                --tw-leading: initial;
+              }
+            }
+          }
+        }
         @property --tw-leading {
           syntax: "*";
           inherits: false;
diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts
index 1824a4239f21..1ffddfe2ac2a 100644
--- a/packages/tailwindcss/src/important.test.ts
+++ b/packages/tailwindcss/src/important.test.ts
@@ -101,10 +101,12 @@ test('variables in utilities should not be marked as important', async () => {
       ['ease-out!', 'z-10!'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-ease: initial;
+          }
         }
       }
     }
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index cc156bef856c..b073f524c46a 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -309,12 +309,14 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-translate-x: 0;
-            --tw-translate-y: 0;
-            --tw-translate-z: 0;
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-translate-x: 0;
+              --tw-translate-y: 0;
+              --tw-translate-z: 0;
+            }
           }
         }
       }
@@ -426,10 +428,12 @@ describe('@apply', () => {
         }
       `),
     ).toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-content: "";
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-content: "";
+            }
           }
         }
       }
@@ -665,10 +669,12 @@ describe('variant stacking', () => {
 
   it('pseudo element variants are re-ordered', async () => {
     expect(await run(['before:hover:flex', 'hover:before:flex'])).toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-content: "";
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-content: "";
+            }
           }
         }
       }
@@ -833,10 +839,12 @@ describe('sorting', () => {
         ['mx-0', 'gap-4', 'space-x-2'].sort(() => Math.random() - 0.5),
       ),
     ).toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-space-x-reverse: 0;
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-space-x-reverse: 0;
+            }
           }
         }
       }
@@ -1470,10 +1478,12 @@ describe('Parsing theme values from CSS', () => {
         ['font-bold', 'font-sans', 'font-serif', 'font-body'],
       ),
     ).toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-font-weight: initial;
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-font-weight: initial;
+            }
           }
         }
       }
@@ -1517,23 +1527,25 @@ describe('Parsing theme values from CSS', () => {
         ['inset-shadow-sm', 'inset-ring-thick', 'inset-lg', 'inset-sm', 'inset-md'],
       ),
     ).toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-shadow: 0 0 #0000;
-            --tw-shadow-color: initial;
-            --tw-shadow-alpha: 100%;
-            --tw-inset-shadow: 0 0 #0000;
-            --tw-inset-shadow-color: initial;
-            --tw-inset-shadow-alpha: 100%;
-            --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;
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-shadow: 0 0 #0000;
+              --tw-shadow-color: initial;
+              --tw-shadow-alpha: 100%;
+              --tw-inset-shadow: 0 0 #0000;
+              --tw-inset-shadow-color: initial;
+              --tw-inset-shadow-alpha: 100%;
+              --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;
+            }
           }
         }
       }
@@ -4971,16 +4983,18 @@ describe('`@property` polyfill', async () => {
         [],
       ),
     ).resolves.toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          :root, :host {
-            --inherit-no-value: initial;
-            --inherit-value: red;
-          }
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            :root, :host {
+              --inherit-no-value: initial;
+              --inherit-value: red;
+            }
 
-          *, :before, :after, ::backdrop {
-            --no-inherit-no-value: initial;
-            --no-inherit-value: red;
+            *, :before, :after, ::backdrop {
+              --no-inherit-no-value: initial;
+              --no-inherit-value: red;
+            }
           }
         }
       }
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 5e2bf3eb5a47..ee8681ae8658 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -145,23 +145,25 @@ test('inset', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --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;
+          }
         }
       }
     }
@@ -3641,11 +3643,13 @@ test('border-spacing', async () => {
       ['border-spacing-1', 'border-spacing-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-border-spacing-x: 0;
+            --tw-border-spacing-y: 0;
+          }
         }
       }
     }
@@ -3701,11 +3705,13 @@ test('border-spacing-x', async () => {
       ['border-spacing-x-1', 'border-spacing-x-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-border-spacing-x: 0;
+            --tw-border-spacing-y: 0;
+          }
         }
       }
     }
@@ -3759,11 +3765,13 @@ test('border-spacing-y', async () => {
       ['border-spacing-y-1', 'border-spacing-y-[123px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-spacing-x: 0;
-          --tw-border-spacing-y: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-border-spacing-x: 0;
+            --tw-border-spacing-y: 0;
+          }
         }
       }
     }
@@ -3973,12 +3981,14 @@ test('translate', async () => {
       '-translate-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
         }
       }
     }
@@ -4056,12 +4066,14 @@ test('translate-x', async () => {
       '-translate-x-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
         }
       }
     }
@@ -4129,12 +4141,14 @@ test('translate-x', async () => {
       ['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
         }
       }
     }
@@ -4200,12 +4214,14 @@ test('translate-y', async () => {
       '-translate-y-[var(--value)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
         }
       }
     }
@@ -4273,12 +4289,14 @@ test('translate-y', async () => {
       ['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
         }
       }
     }
@@ -4338,12 +4356,14 @@ test('translate-y', async () => {
 test('translate-z', async () => {
   expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]']))
     .toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-translate-x: 0;
-            --tw-translate-y: 0;
-            --tw-translate-z: 0;
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-translate-x: 0;
+              --tw-translate-y: 0;
+              --tw-translate-z: 0;
+            }
           }
         }
       }
@@ -4399,12 +4419,14 @@ test('translate-z', async () => {
 
 test('translate-3d', async () => {
   expect(await run(['translate-3d'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-translate-x: 0;
-          --tw-translate-y: 0;
-          --tw-translate-z: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
         }
       }
     }
@@ -4469,14 +4491,16 @@ test('rotate', async () => {
 
 test('rotate-x', async () => {
   expect(await run(['rotate-x-45', '-rotate-x-45', 'rotate-x-[123deg]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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);
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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);
+          }
         }
       }
     }
@@ -4542,14 +4566,16 @@ test('rotate-x', async () => {
 test('rotate-y', async () => {
   expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]']))
     .toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @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);
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @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);
+            }
           }
         }
       }
@@ -4620,14 +4646,16 @@ test('rotate-y', async () => {
 test('rotate-z', async () => {
   expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]']))
     .toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @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);
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @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);
+            }
           }
         }
       }
@@ -4697,14 +4725,16 @@ test('rotate-z', async () => {
 
 test('skew', async () => {
   expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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);
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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);
+          }
         }
       }
     }
@@ -4771,14 +4801,16 @@ test('skew', async () => {
 
 test('skew-x', async () => {
   expect(await run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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);
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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);
+          }
         }
       }
     }
@@ -4842,14 +4874,16 @@ test('skew-x', async () => {
 
 test('skew-y', async () => {
   expect(await run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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);
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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);
+          }
         }
       }
     }
@@ -4914,12 +4948,14 @@ test('skew-y', async () => {
 test('scale', async () => {
   expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]']))
     .toMatchInlineSnapshot(`
-      "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-scale-x: 1;
-            --tw-scale-y: 1;
-            --tw-scale-z: 1;
+      "@layer __tw-properties {
+        @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+          @layer base {
+            *, :before, :after, ::backdrop {
+              --tw-scale-x: 1;
+              --tw-scale-y: 1;
+              --tw-scale-z: 1;
+            }
           }
         }
       }
@@ -4980,12 +5016,14 @@ test('scale', async () => {
 
 test('scale-3d', async () => {
   expect(await run(['scale-3d'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
         }
       }
     }
@@ -5017,12 +5055,14 @@ test('scale-3d', async () => {
 
 test('scale-x', async () => {
   expect(await run(['scale-x-50', '-scale-x-50', 'scale-x-[2]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
         }
       }
     }
@@ -5061,12 +5101,14 @@ test('scale-x', async () => {
     }"
   `)
   expect(await run(['scale-200', 'scale-x-400'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
         }
       }
     }
@@ -5118,12 +5160,14 @@ test('scale-x', async () => {
 
 test('scale-y', async () => {
   expect(await run(['scale-y-50', '-scale-y-50', 'scale-y-[2]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
         }
       }
     }
@@ -5176,12 +5220,14 @@ test('scale-y', async () => {
 
 test('scale-z', async () => {
   expect(await run(['scale-z-50', '-scale-z-50', 'scale-z-[123deg]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scale-x: 1;
-          --tw-scale-y: 1;
-          --tw-scale-z: 1;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scale-x: 1;
+            --tw-scale-y: 1;
+            --tw-scale-z: 1;
+          }
         }
       }
     }
@@ -5241,14 +5287,16 @@ test('transform', async () => {
       'transform-[scaleZ(2)_rotateY(45deg)]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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);
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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);
+          }
         }
       }
     }
@@ -5751,12 +5799,14 @@ test('touch-pan', async () => {
       'touch-pan-down',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-pan-x: initial;
-          --tw-pan-y: initial;
-          --tw-pinch-zoom: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-pan-x: initial;
+            --tw-pan-y: initial;
+            --tw-pinch-zoom: initial;
+          }
         }
       }
     }
@@ -5826,12 +5876,14 @@ test('touch-pan', async () => {
 
 test('touch-pinch-zoom', async () => {
   expect(await run(['touch-pinch-zoom'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-pan-x: initial;
-          --tw-pan-y: initial;
-          --tw-pinch-zoom: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-pan-x: initial;
+            --tw-pan-y: initial;
+            --tw-pinch-zoom: initial;
+          }
         }
       }
     }
@@ -5930,10 +5982,12 @@ test('resize', async () => {
 
 test('scroll-snap-type', async () => {
   expect(await run(['snap-none', 'snap-x', 'snap-y', 'snap-both'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scroll-snap-strictness: proximity;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scroll-snap-strictness: proximity;
+          }
         }
       }
     }
@@ -5976,10 +6030,12 @@ test('scroll-snap-type', async () => {
 
 test('--tw-scroll-snap-strictness', async () => {
   expect(await run(['snap-mandatory', 'snap-proximity'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-scroll-snap-strictness: proximity;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-scroll-snap-strictness: proximity;
+          }
         }
       }
     }
@@ -7940,10 +7996,12 @@ test('space-x', async () => {
       ['space-x-4', 'space-x-[4px]', '-space-x-4'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-x-reverse: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-space-x-reverse: 0;
+          }
         }
       }
     }
@@ -7991,10 +8049,12 @@ test('space-y', async () => {
       ['space-y-4', 'space-y-[4px]', '-space-y-4'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-y-reverse: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-space-y-reverse: 0;
+          }
         }
       }
     }
@@ -8032,10 +8092,12 @@ test('space-y', async () => {
 
 test('space-x-reverse', async () => {
   expect(await run(['space-x-reverse'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-x-reverse: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-space-x-reverse: 0;
+          }
         }
       }
     }
@@ -8055,10 +8117,12 @@ test('space-x-reverse', async () => {
 
 test('space-y-reverse', async () => {
   expect(await run(['space-y-reverse'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-space-y-reverse: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-space-y-reverse: 0;
+          }
         }
       }
     }
@@ -8085,11 +8149,13 @@ test('divide-x', async () => {
       ['divide-x', 'divide-x-4', 'divide-x-123', 'divide-x-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-          --tw-border-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-divide-x-reverse: 0;
+            --tw-border-style: solid;
+          }
         }
       }
     }
@@ -8161,11 +8227,13 @@ test('divide-x with custom default border width', async () => {
       ['divide-x'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
-          --tw-border-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-divide-x-reverse: 0;
+            --tw-border-style: solid;
+          }
         }
       }
     }
@@ -8201,11 +8269,13 @@ test('divide-y', async () => {
       ['divide-y', 'divide-y-4', 'divide-y-123', 'divide-y-[4px]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-          --tw-border-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-divide-y-reverse: 0;
+            --tw-border-style: solid;
+          }
         }
       }
     }
@@ -8281,11 +8351,13 @@ test('divide-y with custom default border width', async () => {
       ['divide-y'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
-          --tw-border-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-divide-y-reverse: 0;
+            --tw-border-style: solid;
+          }
         }
       }
     }
@@ -8315,10 +8387,12 @@ test('divide-y with custom default border width', async () => {
 
 test('divide-x-reverse', async () => {
   expect(await run(['divide-x-reverse'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-x-reverse: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-divide-x-reverse: 0;
+          }
         }
       }
     }
@@ -8338,10 +8412,12 @@ test('divide-x-reverse', async () => {
 
 test('divide-y-reverse', async () => {
   expect(await run(['divide-y-reverse'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-divide-y-reverse: 0;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-divide-y-reverse: 0;
+          }
         }
       }
     }
@@ -10589,10 +10665,12 @@ test('border with custom default border width', async () => {
       ['border'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-border-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-border-style: solid;
+          }
         }
       }
     }
@@ -11682,18 +11760,20 @@ test('from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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%;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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%;
+          }
         }
       }
     }
@@ -11945,18 +12025,20 @@ test('via', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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%;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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%;
+          }
         }
       }
     }
@@ -12220,18 +12302,20 @@ test('to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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%;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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%;
+          }
         }
       }
     }
@@ -12921,20 +13005,22 @@ test('mask-t-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-top-from-position: 0%;
+            --tw-mask-top-to-position: 100%;
+            --tw-mask-top-from-color: black;
+            --tw-mask-top-to-color: transparent;
+          }
         }
       }
     }
@@ -13182,20 +13268,22 @@ test('mask-t-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-top-from-position: 0%;
+            --tw-mask-top-to-position: 100%;
+            --tw-mask-top-from-color: black;
+            --tw-mask-top-to-color: transparent;
+          }
         }
       }
     }
@@ -13444,20 +13532,22 @@ test('mask-r-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-right-from-position: 0%;
+            --tw-mask-right-to-position: 100%;
+            --tw-mask-right-from-color: black;
+            --tw-mask-right-to-color: transparent;
+          }
         }
       }
     }
@@ -13706,20 +13796,22 @@ test('mask-r-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-right-from-position: 0%;
+            --tw-mask-right-to-position: 100%;
+            --tw-mask-right-from-color: black;
+            --tw-mask-right-to-color: transparent;
+          }
         }
       }
     }
@@ -13968,20 +14060,22 @@ test('mask-b-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-bottom-from-position: 0%;
+            --tw-mask-bottom-to-position: 100%;
+            --tw-mask-bottom-from-color: black;
+            --tw-mask-bottom-to-color: transparent;
+          }
         }
       }
     }
@@ -14230,20 +14324,22 @@ test('mask-b-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-bottom-from-position: 0%;
+            --tw-mask-bottom-to-position: 100%;
+            --tw-mask-bottom-from-color: black;
+            --tw-mask-bottom-to-color: transparent;
+          }
         }
       }
     }
@@ -14492,20 +14588,22 @@ test('mask-l-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-left-from-position: 0%;
+            --tw-mask-left-to-position: 100%;
+            --tw-mask-left-from-color: black;
+            --tw-mask-left-to-color: transparent;
+          }
         }
       }
     }
@@ -14754,20 +14852,22 @@ test('mask-l-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-left-from-position: 0%;
+            --tw-mask-left-to-position: 100%;
+            --tw-mask-left-from-color: black;
+            --tw-mask-left-to-color: transparent;
+          }
         }
       }
     }
@@ -15016,24 +15116,26 @@ test('mask-x-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-right-from-position: 0%;
+            --tw-mask-right-to-position: 100%;
+            --tw-mask-right-from-color: black;
+            --tw-mask-right-to-color: transparent;
+            --tw-mask-left-from-position: 0%;
+            --tw-mask-left-to-position: 100%;
+            --tw-mask-left-from-color: black;
+            --tw-mask-left-to-color: transparent;
+          }
         }
       }
     }
@@ -15324,24 +15426,26 @@ test('mask-x-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-right-from-position: 0%;
-          --tw-mask-right-to-position: 100%;
-          --tw-mask-right-from-color: black;
-          --tw-mask-right-to-color: transparent;
-          --tw-mask-left-from-position: 0%;
-          --tw-mask-left-to-position: 100%;
-          --tw-mask-left-from-color: black;
-          --tw-mask-left-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-right-from-position: 0%;
+            --tw-mask-right-to-position: 100%;
+            --tw-mask-right-from-color: black;
+            --tw-mask-right-to-color: transparent;
+            --tw-mask-left-from-position: 0%;
+            --tw-mask-left-to-position: 100%;
+            --tw-mask-left-from-color: black;
+            --tw-mask-left-to-color: transparent;
+          }
         }
       }
     }
@@ -15632,24 +15736,26 @@ test('mask-y-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-top-from-position: 0%;
+            --tw-mask-top-to-position: 100%;
+            --tw-mask-top-from-color: black;
+            --tw-mask-top-to-color: transparent;
+            --tw-mask-bottom-from-position: 0%;
+            --tw-mask-bottom-to-position: 100%;
+            --tw-mask-bottom-from-color: black;
+            --tw-mask-bottom-to-color: transparent;
+          }
         }
       }
     }
@@ -15940,24 +16046,26 @@ test('mask-y-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-left: linear-gradient(#fff, #fff);
-          --tw-mask-right: linear-gradient(#fff, #fff);
-          --tw-mask-bottom: linear-gradient(#fff, #fff);
-          --tw-mask-top: linear-gradient(#fff, #fff);
-          --tw-mask-top-from-position: 0%;
-          --tw-mask-top-to-position: 100%;
-          --tw-mask-top-from-color: black;
-          --tw-mask-top-to-color: transparent;
-          --tw-mask-bottom-from-position: 0%;
-          --tw-mask-bottom-to-position: 100%;
-          --tw-mask-bottom-from-color: black;
-          --tw-mask-bottom-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-left: linear-gradient(#fff, #fff);
+            --tw-mask-right: linear-gradient(#fff, #fff);
+            --tw-mask-bottom: linear-gradient(#fff, #fff);
+            --tw-mask-top: linear-gradient(#fff, #fff);
+            --tw-mask-top-from-position: 0%;
+            --tw-mask-top-to-position: 100%;
+            --tw-mask-top-from-color: black;
+            --tw-mask-top-to-color: transparent;
+            --tw-mask-bottom-from-position: 0%;
+            --tw-mask-bottom-to-position: 100%;
+            --tw-mask-bottom-from-color: black;
+            --tw-mask-bottom-to-color: transparent;
+          }
         }
       }
     }
@@ -16233,17 +16341,19 @@ test('mask-linear', async () => {
       ['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-linear-position: 0deg;
-          --tw-mask-linear-from-position: 0%;
-          --tw-mask-linear-to-position: 100%;
-          --tw-mask-linear-from-color: black;
-          --tw-mask-linear-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-linear-position: 0deg;
+            --tw-mask-linear-from-position: 0%;
+            --tw-mask-linear-to-position: 100%;
+            --tw-mask-linear-from-color: black;
+            --tw-mask-linear-to-color: transparent;
+          }
         }
       }
     }
@@ -16372,17 +16482,19 @@ test('mask-linear-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-linear-position: 0deg;
-          --tw-mask-linear-from-position: 0%;
-          --tw-mask-linear-to-position: 100%;
-          --tw-mask-linear-from-color: black;
-          --tw-mask-linear-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-linear-position: 0deg;
+            --tw-mask-linear-from-position: 0%;
+            --tw-mask-linear-to-position: 100%;
+            --tw-mask-linear-from-color: black;
+            --tw-mask-linear-to-color: transparent;
+          }
         }
       }
     }
@@ -16613,17 +16725,19 @@ test('mask-linear-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-linear-position: 0deg;
-          --tw-mask-linear-from-position: 0%;
-          --tw-mask-linear-to-position: 100%;
-          --tw-mask-linear-from-color: black;
-          --tw-mask-linear-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-linear-position: 0deg;
+            --tw-mask-linear-from-position: 0%;
+            --tw-mask-linear-to-position: 100%;
+            --tw-mask-linear-from-color: black;
+            --tw-mask-linear-to-color: transparent;
+          }
         }
       }
     }
@@ -16847,19 +16961,21 @@ test('mask-radial', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-radial-from-position: 0%;
-          --tw-mask-radial-to-position: 100%;
-          --tw-mask-radial-from-color: black;
-          --tw-mask-radial-to-color: transparent;
-          --tw-mask-radial-shape: ellipse;
-          --tw-mask-radial-size: farthest-corner;
-          --tw-mask-radial-position: center;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-radial-from-position: 0%;
+            --tw-mask-radial-to-position: 100%;
+            --tw-mask-radial-from-color: black;
+            --tw-mask-radial-to-color: transparent;
+            --tw-mask-radial-shape: ellipse;
+            --tw-mask-radial-size: farthest-corner;
+            --tw-mask-radial-position: center;
+          }
         }
       }
     }
@@ -17102,19 +17218,21 @@ test('mask-radial-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-radial-from-position: 0%;
-          --tw-mask-radial-to-position: 100%;
-          --tw-mask-radial-from-color: black;
-          --tw-mask-radial-to-color: transparent;
-          --tw-mask-radial-shape: ellipse;
-          --tw-mask-radial-size: farthest-corner;
-          --tw-mask-radial-position: center;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-radial-from-position: 0%;
+            --tw-mask-radial-to-position: 100%;
+            --tw-mask-radial-from-color: black;
+            --tw-mask-radial-to-color: transparent;
+            --tw-mask-radial-shape: ellipse;
+            --tw-mask-radial-size: farthest-corner;
+            --tw-mask-radial-position: center;
+          }
         }
       }
     }
@@ -17357,19 +17475,21 @@ test('mask-radial-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-radial-from-position: 0%;
-          --tw-mask-radial-to-position: 100%;
-          --tw-mask-radial-from-color: black;
-          --tw-mask-radial-to-color: transparent;
-          --tw-mask-radial-shape: ellipse;
-          --tw-mask-radial-size: farthest-corner;
-          --tw-mask-radial-position: center;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-radial-from-position: 0%;
+            --tw-mask-radial-to-position: 100%;
+            --tw-mask-radial-from-color: black;
+            --tw-mask-radial-to-color: transparent;
+            --tw-mask-radial-shape: ellipse;
+            --tw-mask-radial-size: farthest-corner;
+            --tw-mask-radial-position: center;
+          }
         }
       }
     }
@@ -17597,17 +17717,19 @@ test('mask-conic', async () => {
       ['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-conic-position: 0deg;
-          --tw-mask-conic-from-position: 0%;
-          --tw-mask-conic-to-position: 100%;
-          --tw-mask-conic-from-color: black;
-          --tw-mask-conic-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-conic-position: 0deg;
+            --tw-mask-conic-from-position: 0%;
+            --tw-mask-conic-to-position: 100%;
+            --tw-mask-conic-from-color: black;
+            --tw-mask-conic-to-color: transparent;
+          }
         }
       }
     }
@@ -17736,17 +17858,19 @@ test('mask-conic-from', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-conic-position: 0deg;
-          --tw-mask-conic-from-position: 0%;
-          --tw-mask-conic-to-position: 100%;
-          --tw-mask-conic-from-color: black;
-          --tw-mask-conic-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-conic-position: 0deg;
+            --tw-mask-conic-from-position: 0%;
+            --tw-mask-conic-to-position: 100%;
+            --tw-mask-conic-from-color: black;
+            --tw-mask-conic-to-color: transparent;
+          }
         }
       }
     }
@@ -17977,17 +18101,19 @@ test('mask-conic-to', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-mask-linear: linear-gradient(#fff, #fff);
-          --tw-mask-radial: linear-gradient(#fff, #fff);
-          --tw-mask-conic: linear-gradient(#fff, #fff);
-          --tw-mask-conic-position: 0deg;
-          --tw-mask-conic-from-position: 0%;
-          --tw-mask-conic-to-position: 100%;
-          --tw-mask-conic-from-color: black;
-          --tw-mask-conic-to-color: transparent;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-mask-linear: linear-gradient(#fff, #fff);
+            --tw-mask-radial: linear-gradient(#fff, #fff);
+            --tw-mask-conic: linear-gradient(#fff, #fff);
+            --tw-mask-conic-position: 0deg;
+            --tw-mask-conic-from-position: 0%;
+            --tw-mask-conic-to-position: 100%;
+            --tw-mask-conic-from-color: black;
+            --tw-mask-conic-to-color: transparent;
+          }
         }
       }
     }
@@ -19705,10 +19831,12 @@ test('font', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-font-weight: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-font-weight: initial;
+          }
         }
       }
     }
@@ -20405,22 +20533,24 @@ test('filter', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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;
-          --tw-drop-shadow: initial;
-          --tw-drop-shadow-color: initial;
-          --tw-drop-shadow-alpha: 100%;
-          --tw-drop-shadow-size: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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;
+            --tw-drop-shadow: initial;
+            --tw-drop-shadow-color: initial;
+            --tw-drop-shadow-alpha: 100%;
+            --tw-drop-shadow-size: initial;
+          }
         }
       }
     }
@@ -20803,18 +20933,20 @@ test('backdrop-filter', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @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;
+          }
         }
       }
     }
@@ -21328,10 +21460,12 @@ test('delay', async () => {
 
 test('duration', async () => {
   expect(await run(['duration-123', 'duration-200', 'duration-[300ms]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-duration: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-duration: initial;
+          }
         }
       }
     }
@@ -21382,10 +21516,12 @@ test('ease', async () => {
       ['ease-in', 'ease-out', 'ease-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-ease: initial;
+          }
         }
       }
     }
@@ -21488,13 +21624,15 @@ test('contain', async () => {
       'contain-[unset]',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-contain-size: initial;
-          --tw-contain-layout: initial;
-          --tw-contain-paint: initial;
-          --tw-contain-style: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-contain-size: initial;
+            --tw-contain-layout: initial;
+            --tw-contain-paint: initial;
+            --tw-contain-style: initial;
+          }
         }
       }
     }
@@ -21577,10 +21715,12 @@ test('contain', async () => {
 
 test('content', async () => {
   expect(await run(['content-["hello_world"]'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
         }
       }
     }
@@ -21638,10 +21778,12 @@ test('leading', async () => {
       ['leading-tight', 'leading-6', 'leading-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-leading: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-leading: initial;
+          }
         }
       }
     }
@@ -21697,10 +21839,12 @@ test('tracking', async () => {
       ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-tracking: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-tracking: initial;
+          }
         }
       }
     }
@@ -21782,14 +21926,16 @@ test('font-variant-numeric', async () => {
       'stacked-fractions',
     ]),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ordinal: initial;
-          --tw-slashed-zero: initial;
-          --tw-numeric-figure: initial;
-          --tw-numeric-spacing: initial;
-          --tw-numeric-fraction: initial;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-ordinal: initial;
+            --tw-slashed-zero: initial;
+            --tw-numeric-figure: initial;
+            --tw-numeric-spacing: initial;
+            --tw-numeric-fraction: initial;
+          }
         }
       }
     }
@@ -21946,10 +22092,12 @@ test('outline', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-outline-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-outline-style: solid;
+          }
         }
       }
     }
@@ -22132,10 +22280,12 @@ test('outline', async () => {
       ['outline'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-outline-style: solid;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-outline-style: solid;
+          }
         }
       }
     }
@@ -22693,11 +22843,13 @@ test('text-shadow', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-text-shadow-color: initial;
-          --tw-text-shadow-alpha: 100%;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-text-shadow-color: initial;
+            --tw-text-shadow-alpha: 100%;
+          }
         }
       }
     }
@@ -22948,23 +23100,25 @@ test('shadow', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --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;
+          }
         }
       }
     }
@@ -23294,23 +23448,25 @@ test('inset-shadow', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --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;
+          }
         }
       }
     }
@@ -23637,23 +23793,25 @@ test('ring', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --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;
+          }
         }
       }
     }
@@ -23895,23 +24053,25 @@ test('ring', async () => {
       ['ring'],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --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;
+          }
         }
       }
     }
@@ -24086,23 +24246,25 @@ test('inset-ring', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-shadow: 0 0 #0000;
-          --tw-shadow-color: initial;
-          --tw-shadow-alpha: 100%;
-          --tw-inset-shadow: 0 0 #0000;
-          --tw-inset-shadow-color: initial;
-          --tw-inset-shadow-alpha: 100%;
-          --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;
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-shadow: 0 0 #0000;
+            --tw-shadow-color: initial;
+            --tw-shadow-alpha: 100%;
+            --tw-inset-shadow: 0 0 #0000;
+            --tw-inset-shadow-color: initial;
+            --tw-inset-shadow-alpha: 100%;
+            --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;
+          }
         }
       }
     }
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 0a05785e3d2f..ca4c7db7fe50 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -114,10 +114,12 @@ test('details-content', async () => {
 
 test('before', async () => {
   expect(await run(['before:flex'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
         }
       }
     }
@@ -138,10 +140,12 @@ test('before', async () => {
 
 test('after', async () => {
   expect(await run(['after:flex'])).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
         }
       }
     }
@@ -2248,10 +2252,12 @@ test('variant order', async () => {
       ],
     ),
   ).toMatchInlineSnapshot(`
-    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-content: "";
+    "@layer __tw-properties {
+      @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
         }
       }
     }