Only detect nesting when using @apply

src/lib/expandApplyAtRules.js

@@ -432,6 +432,23 @@ function processApply(root, context, localCache) {
 
       let rules = applyClassCache.get(applyCandidate)
 
+      // Verify that we can apply the class
+      for (let [, rule] of rules) {
+        if (rule.type === 'atrule') {
+          continue
+        }
+
+        rule.walkRules(() => {
+          throw apply.error(
+            [
+              `The \`${applyCandidate}\` class cannot be applied because it uses nested CSS.`,
+              'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+              'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+            ].join('\n')
+          )
+        })
+      }
+
       candidates.push([applyCandidate, important, rules])
     }
   }

src/processTailwindFeatures.js

@@ -7,16 +7,13 @@ import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
 import partitionApplyAtRules from './lib/partitionApplyAtRules'
-import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
   return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
-    detectNesting()(root, result)
-
     // Partition apply rules that are found in the css
     // itself.
     partitionApplyAtRules()(root, result)

tests/apply.test.js

@@ -2143,3 +2143,72 @@ test('should not break replacing important selector when the same as the parent
     }
   `)
 })
+
+test('applying classes with nested CSS should result in an error', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="foo"></div>`,
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind components;
+    @layer components {
+      .bar .baz {
+        color: red;
+
+        &:hover {
+          color: red;
+        }
+      }
+
+      .foo {
+        @apply flex baz;
+      }
+    }
+  `
+
+  expect.assertions(1)
+
+  return run(input, config).catch((err) => {
+    expect(err.reason).toMatchInlineSnapshot(`
+      "The \`baz\` class cannot be applied because it uses nested CSS.
+      Please enable a CSS nesting plugin *before* Tailwind in your configuration.
+      See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting"
+    `)
+  })
+})
+
+test('applying user defined classes with nested CSS should result in an error', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="example"></div>`,
+      },
+    ],
+  }
+
+  let input = css`
+    .foo {
+      .bar {
+        color: red;
+      }
+    }
+
+    .example {
+      @apply bar;
+    }
+  `
+
+  expect.assertions(1)
+
+  return run(input, config).catch((err) => {
+    expect(err.reason).toMatchInlineSnapshot(`
+      "The \`bar\` class cannot be applied because it uses nested CSS.
+      Please enable a CSS nesting plugin *before* Tailwind in your configuration.
+      See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting"
+    `)
+  })
+})