diff --git a/CHANGELOG.md b/CHANGELOG.md
index 962495a8ee08..f9c5be0476ec 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
+
+- Ensure complex variants with multiple classes work [#6311](https://github.com/tailwindlabs/tailwindcss/pull/6311)
 
 ## [3.0.0] - 2021-12-09
 
diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index ed3caa13c537..592acb163a0b 100644
--- a/src/lib/expandApplyAtRules.js
+++ b/src/lib/expandApplyAtRules.js
@@ -129,10 +129,10 @@ function processApply(root, context) {
     // TODO: Should we use postcss-selector-parser for this instead?
     function replaceSelector(selector, utilitySelectors, candidate) {
       let needle = `.${escapeClassName(candidate)}`
-      let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g)
+      let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g)
 
       return selector
-        .split(/\s*,\s*/g)
+        .split(/\s*\,(?![^(]*\))\s*/g)
         .map((s) => {
           let replaced = []
 
diff --git a/tests/variants.test.js b/tests/variants.test.js
index b241a11c74ef..5f8951aee63f 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -167,6 +167,44 @@ describe('custom advanced variants', () => {
       `)
     })
   })
+
+  test('using multiple classNames in your custom variant', () => {
+    let config = {
+      content: [
+        {
+          raw: html` <div class="my-variant:underline test"></div> `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('my-variant', '&:where(.one, .two, .three)')
+        },
+      ],
+    }
+
+    let input = css`
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer components {
+        .test {
+          @apply my-variant:italic;
+        }
+      }
+    `
+
+    return run(input, config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        .test:where(.one, .two, .three) {
+          font-style: italic;
+        }
+
+        .my-variant\:underline:where(.one, .two, .three) {
+          text-decoration: underline;
+        }
+      `)
+    })
+  })
 })
 
 test('stacked peer variants', async () => {