diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84a93b630a7b..ebd2f590cacf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don’t move `::ng-deep` pseudo-element to end of selector when using `@apply` ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943))
 
 ## [3.3.1] - 2023-03-30
 
diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
index 8a1a3f50c1f8..8857d8fc55e1 100644
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -337,6 +337,9 @@ let pseudoElementExceptions = [
   '::-webkit-scrollbar-track-piece',
   '::-webkit-scrollbar-corner',
   '::-webkit-resizer',
+
+  // Old-style Angular Shadow DOM piercing pseudo element
+  '::ng-deep',
 ]
 
 /**
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 0ab9ec17567f..15cb4176880d 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2427,4 +2427,34 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  stable.test('::ng-deep pseudo element is left alone', () => {
+    let config = {
+      darkMode: 'class',
+      content: [
+        {
+          raw: html` <div class="foo bar"></div> `,
+        },
+      ],
+    }
+
+    let input = css`
+      ::ng-deep .foo .bar {
+        @apply font-bold;
+      }
+    `
+
+    return run(input, config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        ::ng-deep .foo .bar {
+          font-weight: 700;
+        }
+      `)
+    })
+  })
+
+  // 1. `::ng-deep` is deprecated
+  // 2. It uses invalid selector syntax that Lightning CSS does not support
+  // It may be enough for Oxide to not support it at all
+  oxide.test.todo('::ng-deep pseudo element is left alone')
 })