Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
[Bug]: Important modifier not working
### What version of Tailwind CSS are you using?

2.1.2

### What build tool (or framework if it abstracts the build tool) are you using?

vue-tailwind 2.2.1, webpack 5.21.2

### What version of Node.js are you using?

v15.11.0

### What browser are you using?

Chrome

### What operating system are you using?

macOS

### Reproduction repository

https://play.tailwindcss.com/qVS5lsqxMS

### Describe your issue

The important modifier does not work as announced here:
https://tailwindcss.com/docs/just-in-time-mode

The attached reproduction link should have a blue background but it is still gray:
![image](https://user-images.githubusercontent.com/5358638/116396493-c2c6d900-a825-11eb-8988-a407b536fbb0.png)



Hints:
Have you enabled JIT mode [as described in the documentation](https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode)? JIT mode is not currently supported in Tailwind Play, and you are using `jit: true` there instead of `mode: 'jit'`.

If you have enabled JIT mode correctly and it's still not working please provide a repository which reproduces the issue, thanks!
We're running into this with `mode: "jit"` and `@tailwindcss/postcss7-compat`:

Input:
```css
.ui-state-active {
    @apply !bg-none !whitespace-normal;
}
```

Output:
```css
.ui-state-active {
    white-space: normal;
    background-image: none;
}
```

However, if I inline `!whitespace-normal`, it works as expected:
![image](https://user-images.githubusercontent.com/2636763/116698252-24a45180-a992-11eb-99f5-b7e94045f8bc.png)

To make utilities important with `@apply` you need to add the `!important` keyword to the end of the list:

```css
.ui-state-active {
    @apply bg-none whitespace-normal !important;
}
```

This is something we could probably improve now that there's a dedicated important modifier though.

Patch:
diff --git a/src/jit/lib/expandApplyAtRules.js b/src/jit/lib/expandApplyAtRules.js
--- a/src/jit/lib/expandApplyAtRules.js
+++ b/src/jit/lib/expandApplyAtRules.js
@@ -30,7 +30,6 @@ function buildApplyCache(applyCandidates, context) {
   return context.applyClassCache
 }
 
-// TODO: Apply `!important` stuff correctly instead of just skipping it
 function extractApplyCandidates(params) {
   let candidates = params.split(/[\s\t\n]+/g)
 
@@ -143,7 +142,6 @@ function processApply(root, context) {
         .join(', ')
     }
 
-    /** @type {Map<import('postcss').Node, [string, boolean, import('postcss').Node[]][]>} */
     let perParentApplies = new Map()
 
     // Collect all apply candidates and their rules
@@ -197,7 +195,7 @@ function processApply(root, context) {
               rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate)
 
               rule.walkDecls((d) => {
-                d.important = important
+                d.important = meta.important || important
               })
             })
           }
diff --git a/src/jit/lib/generateRules.js b/src/jit/lib/generateRules.js
--- a/src/jit/lib/generateRules.js
+++ b/src/jit/lib/generateRules.js
@@ -79,7 +79,7 @@ function applyImportant(matches) {
       })
       r.walkDecls((d) => (d.important = true))
     })
-    result.push([meta, container.nodes[0]])
+    result.push([{ ...meta, important: true }, container.nodes[0]])
   }
 
   return result


Test patch:
diff --git a/tests/jit/apply.test.css b/tests/jit/apply.test.css
--- a/tests/jit/apply.test.css
+++ b/tests/jit/apply.test.css
@@ -323,6 +323,11 @@ h2 {
     line-height: 2rem;
   }
 }
+.important-modifier {
+  border-radius: 0.375rem !important;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
diff --git a/tests/jit/apply.test.html b/tests/jit/apply.test.html
--- a/tests/jit/apply.test.html
+++ b/tests/jit/apply.test.html
@@ -32,6 +32,7 @@
     <div class="recursive-apply-c"></div>
     <div class="use-with-other-properties-base use-with-other-properties-component"></div>
     <div class="add-sibling-properties"></div>
+    <div class="important-modifier"></div>
     <div class="a b"></div>
     <div class="foo"></div>
     <div class="bar"></div>
diff --git a/tests/jit/apply.test.js b/tests/jit/apply.test.js
--- a/tests/jit/apply.test.js
+++ b/tests/jit/apply.test.js
@@ -119,6 +119,10 @@ test('@apply', () => {
       @apply lg:text-2xl;
       @apply sm:text-2xl;
     }
+
+    .important-modifier {
+      @apply px-4 !rounded-md;
+    }
   }
 
   @layer utilities {