diff --git a/CHANGELOG.md b/CHANGELOG.md
index 758347fab..abd79d939 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix missing `string[]` in the `theme.dropShadow` types ([#10072](https://github.com/tailwindlabs/tailwindcss/pull/10072))
 - Update list of length units ([#10100](https://github.com/tailwindlabs/tailwindcss/pull/10100))
 - Fix not matching arbitrary properties when closely followed by square brackets ([#10212](https://github.com/tailwindlabs/tailwindcss/pull/10212))
+- Allow direct nesting in `root` or `@layer` nodes ([#10229](https://github.com/tailwindlabs/tailwindcss/pull/10229))
 
 ### Changed
 
diff --git a/src/lib/detectNesting.js b/src/lib/detectNesting.js
index 02b39aec8..03252e200 100644
--- a/src/lib/detectNesting.js
+++ b/src/lib/detectNesting.js
@@ -1,3 +1,11 @@
+function isRoot(node) {
+  return node.type === 'root'
+}
+
+function isAtLayer(node) {
+  return node.type === 'atrule' && node.name === 'layer'
+}
+
 export default function (_context) {
   return (root, result) => {
     let found = false
@@ -5,7 +13,7 @@ export default function (_context) {
     root.walkAtRules('tailwind', (node) => {
       if (found) return false
 
-      if (node.parent && node.parent.type !== 'root') {
+      if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
         found = true
         node.warn(
           result,
diff --git a/tests/detect-nesting.test.js b/tests/detect-nesting.test.js
index bd123eca5..08eeacf98 100644
--- a/tests/detect-nesting.test.js
+++ b/tests/detect-nesting.test.js
@@ -29,6 +29,31 @@ it('should warn when we detect nested css', () => {
   })
 })
 
+it('should not warn when we detect nested css inside css @layer rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="underline"></div>` }],
+  }
+
+  let input = css`
+    @layer tw-base, tw-components, tw-utilities;
+    @layer tw-utilities {
+      @tailwind utilities;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @layer tw-base, tw-components, tw-utilities;
+      @layer tw-utilities {
+        .underline {
+          text-decoration-line: underline;
+        }
+      }
+    `)
+    expect(result.messages).toHaveLength(0)
+  })
+})
+
 it('should warn when we detect namespaced @tailwind at rules', () => {
   let config = {
     content: [{ raw: html`<div class="text-center"></div>` }],