Emit @property fallbacks at the beginning of the file

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -1,7 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"@layer theme {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  *, :before, :after, ::backdrop {
+    --tw-font-weight: initial;
+  }
+}
+
+@layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -281,14 +287,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 }
 
-@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
-    }
-  }
-}
-
 @property --tw-font-weight {
   syntax: "*";
   inherits: false

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -1,7 +1,26 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-":root, :host {
+"@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+  *, :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;
+  }
+}
+
+:root, :host {
   --color-red-500: oklch(63.7% .237 25.331);
   --spacing: .25rem;
 }
@@ -25,25 +44,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   }
 }
 
-@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) 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-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}
-
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

packages/tailwindcss/src/ast.ts

@@ -569,11 +569,14 @@ export function optimizeAst(
       }
 
       if (fallbackAst.length > 0) {
-        newAst.push(
+        let firstNonCommentIndex = newAst.findIndex((item) => item.kind !== 'comment') ?? 0
+        newAst.splice(
+          firstNonCommentIndex,
+          0,
           atRule(
             '@supports',
             '((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
-            [atRule('@layer', 'base', fallbackAst)],
+            fallbackAst,
           ),
         )
       }

packages/tailwindcss/src/compat/config.test.ts

@@ -322,7 +322,12 @@ describe('theme callbacks', () => {
 
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
-        ".prose {
+        "@supports ((-webkit-hyphens: none) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+          *, ::before, ::after, ::backdrop {
+            --tw-leading: initial;
+          }
+        }
+        .prose {
           [class~=lead-base] {
             font-size: 100rem;
             line-height: 201rem;
@@ -348,13 +353,6 @@ describe('theme callbacks', () => {
           --tw-leading: 201rem;
           line-height: 201rem;
         }
-        @supports ((-webkit-hyphens: none) and (not (margin-trim: 1lh))) 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;

packages/tailwindcss/src/important.test.ts

@@ -101,7 +101,13 @@ test('variables in utilities should not be marked as important', async () => {
       ['ease-out!', 'z-10!'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "@supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop {
+        --tw-ease: initial;
+      }
+    }
+
+    :root, :host {
       --ease-out: cubic-bezier(0, 0, .2, 1);
     }
 
@@ -114,14 +120,6 @@ test('variables in utilities should not be marked as important', async () => {
       transition-timing-function: var(--ease-out) !important;
     }
 
-    @supports (((-webkit-hyphens: none)) and (not (margin-trim: 1lh))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-      @layer base {
-        *, :before, :after, ::backdrop {
-          --tw-ease: initial;
-        }
-      }
-    }
-
     @property --tw-ease {
       syntax: "*";
       inherits: false