diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9b2e3b7d5fe..aa4fb368fc38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Batch reading content files to prevent `too many open files` error ([#12079](https://github.com/tailwindlabs/tailwindcss/pull/12079))
 - Skip over classes inside `:not(…)` when nested in an at-rule ([#12105](https://github.com/tailwindlabs/tailwindcss/pull/12105))
 - Update types to work with `Node16` module resolution ([#12097](https://github.com/tailwindlabs/tailwindcss/pull/12097))
+- Don’t crash when important and parent selectors are equal in `@apply` ([#12112](https://github.com/tailwindlabs/tailwindcss/pull/12112))
 
 ### Added
 
diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index 3763809e003e..ed48dbc4f75b 100644
--- a/src/lib/expandApplyAtRules.js
+++ b/src/lib/expandApplyAtRules.js
@@ -553,6 +553,13 @@ function processApply(root, context, localCache) {
                 ? parent.selector.slice(importantSelector.length)
                 : parent.selector
 
+            // If the selector becomes empty after replacing the important selector
+            // This means that it's the same as the parent selector and we don't want to replace it
+            // Otherwise we'll crash
+            if (parentSelector === '') {
+              parentSelector = parent.selector
+            }
+
             rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
 
             // And then re-add it if it was removed
diff --git a/tests/apply.test.js b/tests/apply.test.js
index e0c324bf974f..9e9f0310f194 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2081,3 +2081,55 @@ test('::ng-deep, ::deep, ::v-deep pseudo elements are left alone', () => {
     `)
   })
 })
+
+test('should not break replacing important selector when the same as the parent selector (pseudo)', async () => {
+  let config = {
+    important: ':root',
+    content: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @layer components {
+      :root {
+        @apply flex;
+      }
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    :root {
+      display: flex;
+    }
+  `)
+})
+
+test('should not break replacing important selector when the same as the parent selector (class)', async () => {
+  let config = {
+    important: '.foo',
+    content: [
+      {
+        raw: html` <div class="foo"></div> `,
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind components;
+    @layer components {
+      .foo {
+        @apply flex;
+      }
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    .foo {
+      display: flex;
+    }
+  `)
+})