Allow :global selector around @tailwind

src/lib/detectNesting.js

@@ -6,14 +6,23 @@ function isAtLayer(node) {
   return node.type === 'atrule' && node.name === 'layer'
 }
 
+function isGlobalRoot(node) {
+  if (node.selector !== ':global') return false
+
+  return node.parent && isRoot(node.parent)
+}
+
 export default function (_context) {
   return (root, result) => {
     let found = false
 
     root.walkAtRules('tailwind', (node) => {
       if (found) return false
 
-      if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
+      if (
+        node.parent &&
+        !(isRoot(node.parent) || isAtLayer(node.parent) || isGlobalRoot(node.parent))
+      ) {
         found = true
         node.warn(
           result,

tests/detect-nesting.test.js

@@ -54,6 +54,41 @@ it('should not warn when we detect nested css inside css @layer rules', () => {
   })
 })
 
+it('should not warn when we detect global @layer rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="underline"></div>` }],
+  }
+
+  let input = css`
+    :global {
+      @layer tw-base, tw-components, tw-utilities;
+      @layer tw-utilities {
+        @tailwind utilities;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.messages).toHaveLength(0)
+  })
+})
+
+it('should not warn when we detect global @tailwind at rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="text-center"></div>` }],
+  }
+
+  let input = css`
+    :global {
+      @tailwind utilities;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    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>` }],