diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -88,7 +88,7 @@ function applyPrefix(matches, context) {
   return matches
 }
 
-function applyImportant(matches) {
+function applyImportant(matches, classCandidate) {
   if (matches.length === 0) {
     return matches
   }
@@ -98,7 +98,10 @@ function applyImportant(matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
     container.walkRules((r) => {
       r.selector = updateAllClasses(r.selector, (className) => {
-        return `!${className}`
+        if (className === classCandidate) {
+          return `!${className}`
+        }
+        return className
       })
       r.walkDecls((d) => (d.important = true))
     })
@@ -514,7 +517,7 @@ function* resolveMatches(candidate, context) {
     matches = applyPrefix(matches, context)
 
     if (important) {
-      matches = applyImportant(matches, context)
+      matches = applyImportant(matches, classCandidate)
     }
 
     for (let variant of variants) {

diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -17,6 +17,22 @@ test('important modifier', () => {
       },
     ],
     corePlugins: { preflight: false },
+    plugins: [
+      function ({ theme, matchUtilities }) {
+        matchUtilities(
+          {
+            'custom-parent': (value) => {
+              return {
+                '.custom-child': {
+                  margin: value,
+                },
+              }
+            },
+          },
+          { values: theme('spacing') }
+        )
+      },
+    ],
   }
 
   let input = css`
@@ -57,6 +73,9 @@ test('important modifier', () => {
       .\!font-bold {
         font-weight: 700 !important;
       }
+      .\!custom-parent-5 .custom-child {
+        margin: 1.25rem !important;
+      }
       .hover\:\!text-center:hover {
         text-align: center !important;
       }

! important not working as expected with the matchUtilities


**What version of Tailwind CSS are you using?**
Tailwind v3.0.14

**What build tool (or framework if it abstracts the build tool) are you using?**
postcss-cli 8.3.1


**What browser are you using?**
Chrome,

**What operating system are you using?**
Windows

**Reproduction URL**.
https://play.tailwindcss.com/zEL8hw6BSy

**Describe your issue**

Creating a match utilities that has subclasses isn't working correctly with !important.
I created the following matchUtilities to enable editing the title font-size from the parent (for headless CMS scenario)
`'card-title-text': (value) => ({'.card-title': {'font-size': value,}}),`

Doing so worked as expected for normal classes and generated the following class:
`.card-title-text-4xl .card-title {
  font-size: 2.25rem/* 36px */;
  font-size: [object Object];
}`
but for !card-title-text-4xl it applied the ! to all subclasses as well generating the following css

```
.\!card-title-text-4xl .\!card-title {
  font-size: 2.25rem/* 36px */ !important;
  font-size: [object Object] !important;
}
```
The \! prefix before the card-title i believe shouldn't exist


tests/important-modifier.test.js