diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb7edac5086a..7e7e7ad3a454 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Handle variants when the same class appears multiple times in a selector ([#10397](https://github.com/tailwindlabs/tailwindcss/pull/10397))
 - Handle group/peer variants with quoted strings ([#10400](https://github.com/tailwindlabs/tailwindcss/pull/10400))
 - Parse alpha value from rgba/hsla colors when using variables ([#10429](https://github.com/tailwindlabs/tailwindcss/pull/10429))
+- Sort by `layer` inside `variants` layer ([#10505](https://github.com/tailwindlabs/tailwindcss/pull/10505))
 
 ### Changed
 
diff --git a/src/lib/offsets.js b/src/lib/offsets.js
index 4e6d0ee9f2dd..a43ebe4f36b8 100644
--- a/src/lib/offsets.js
+++ b/src/lib/offsets.js
@@ -209,6 +209,12 @@ export class Offsets {
       return this.layerPositions[a.layer] - this.layerPositions[b.layer]
     }
 
+    // When sorting the `variants` layer, we need to sort based on the parent layer as well within
+    // this variants layer.
+    if (a.parentLayer !== b.parentLayer) {
+      return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer]
+    }
+
     // Sort based on the sorting function
     for (let aOptions of a.options) {
       for (let bOptions of b.options) {
diff --git a/tests/getSortOrder.test.js b/tests/getSortOrder.test.js
index c65df3b6bea0..b65e447d1f35 100644
--- a/tests/getSortOrder.test.js
+++ b/tests/getSortOrder.test.js
@@ -60,7 +60,7 @@ crosscheck(() => {
     // Components and utilities with variants
     [
       'focus:hover:container hover:underline hover:container p-1',
-      'p-1 hover:container hover:underline focus:hover:container',
+      'p-1 hover:container focus:hover:container hover:underline',
     ],
 
     // Leave user css order alone, and move to the front
@@ -98,7 +98,7 @@ crosscheck(() => {
     // Components and utilities with variants
     [
       'focus:hover:tw-container hover:tw-underline hover:tw-container tw-p-1',
-      'tw-p-1 hover:tw-container hover:tw-underline focus:hover:tw-container',
+      'tw-p-1 hover:tw-container focus:hover:tw-container hover:tw-underline',
     ],
 
     // Leave user css order alone, and move to the front
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index c8dd5c339b89..976018cb05dc 100644
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -551,9 +551,6 @@ crosscheck(() => {
         ::backdrop {
           margin: 10px;
         }
-        .first\:pt-0:first-child {
-          padding-top: 0;
-        }
         .hover\:container:hover {
           width: 100%;
         }
@@ -582,6 +579,69 @@ crosscheck(() => {
             max-width: 1536px;
           }
         }
+        @media (min-width: 640px) {
+          .sm\:container {
+            width: 100%;
+          }
+          @media (min-width: 640px) {
+            .sm\:container {
+              max-width: 640px;
+            }
+          }
+          @media (min-width: 768px) {
+            .sm\:container {
+              max-width: 768px;
+            }
+          }
+          @media (min-width: 1024px) {
+            .sm\:container {
+              max-width: 1024px;
+            }
+          }
+          @media (min-width: 1280px) {
+            .sm\:container {
+              max-width: 1280px;
+            }
+          }
+          @media (min-width: 1536px) {
+            .sm\:container {
+              max-width: 1536px;
+            }
+          }
+        }
+        @media (min-width: 768px) {
+          .md\:container {
+            width: 100%;
+          }
+          @media (min-width: 640px) {
+            .md\:container {
+              max-width: 640px;
+            }
+          }
+          @media (min-width: 768px) {
+            .md\:container {
+              max-width: 768px;
+            }
+          }
+          @media (min-width: 1024px) {
+            .md\:container {
+              max-width: 1024px;
+            }
+          }
+          @media (min-width: 1280px) {
+            .md\:container {
+              max-width: 1280px;
+            }
+          }
+          @media (min-width: 1536px) {
+            .md\:container {
+              max-width: 1536px;
+            }
+          }
+        }
+        .first\:pt-0:first-child {
+          padding-top: 0;
+        }
         .hover\:scale-75:hover {
           --tw-scale-x: 0.75;
           --tw-scale-y: 0.75;
@@ -661,34 +721,6 @@ crosscheck(() => {
           background: #abcdef;
         }
         @media (min-width: 640px) {
-          .sm\:container {
-            width: 100%;
-          }
-          @media (min-width: 640px) {
-            .sm\:container {
-              max-width: 640px;
-            }
-          }
-          @media (min-width: 768px) {
-            .sm\:container {
-              max-width: 768px;
-            }
-          }
-          @media (min-width: 1024px) {
-            .sm\:container {
-              max-width: 1024px;
-            }
-          }
-          @media (min-width: 1280px) {
-            .sm\:container {
-              max-width: 1280px;
-            }
-          }
-          @media (min-width: 1536px) {
-            .sm\:container {
-              max-width: 1536px;
-            }
-          }
           .sm\:text-center {
             text-align: center;
           }
@@ -707,34 +739,6 @@ crosscheck(() => {
           }
         }
         @media (min-width: 768px) {
-          .md\:container {
-            width: 100%;
-          }
-          @media (min-width: 640px) {
-            .md\:container {
-              max-width: 640px;
-            }
-          }
-          @media (min-width: 768px) {
-            .md\:container {
-              max-width: 768px;
-            }
-          }
-          @media (min-width: 1024px) {
-            .md\:container {
-              max-width: 1024px;
-            }
-          }
-          @media (min-width: 1280px) {
-            .md\:container {
-              max-width: 1280px;
-            }
-          }
-          @media (min-width: 1536px) {
-            .md\:container {
-              max-width: 1536px;
-            }
-          }
           .md\:text-center {
             text-align: center;
           }
diff --git a/tests/modify-selectors.test.js b/tests/modify-selectors.test.js
index a5e3ffaaef9e..3176b17f3da5 100644
--- a/tests/modify-selectors.test.js
+++ b/tests/modify-selectors.test.js
@@ -66,15 +66,16 @@ crosscheck(() => {
         .font-bold {
           font-weight: 700;
         }
-        .foo .foo\:markdown > p {
-          margin-top: 12px;
-        }
-        .foo .foo\:font-bold {
-          font-weight: 700;
-        }
+        .foo .foo\:markdown > p,
         .foo .foo\:visited\:markdown:visited > p {
           margin-top: 12px;
         }
+        @media (min-width: 1024px) {
+          .foo .lg\:foo\:disabled\:markdown:disabled > p {
+            margin-top: 12px;
+          }
+        }
+        .foo .foo\:font-bold,
         .foo .foo\:hover\:font-bold:hover {
           font-weight: 700;
         }
@@ -88,11 +89,6 @@ crosscheck(() => {
             font-weight: 700;
           }
         }
-        @media (min-width: 1024px) {
-          .foo .lg\:foo\:disabled\:markdown:disabled > p {
-            margin-top: 12px;
-          }
-        }
       `)
     })
   })