Allow direct nesting in root or @layer nodes

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
 

src/lib/detectNesting.js

@@ -1,11 +1,19 @@
+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
 
     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,

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>` }],