Repository: tailwindlabs/tailwindcss (ts)

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)


Pull request description:
Support applying important utilities in JIT
Resolves #4202 

This PR makes it possible to apply utilities with the important `!` prefix and have them properly applied as `!important`:

```css
.my-class {
  @apply font-bold !px-3;
}
```

Previous `!important` would be lost when applying `!px-3`.

Patch:
diff --git a/src/jit/lib/expandApplyAtRules.js b/src/jit/lib/expandApplyAtRules.js
index 13881924..6e614950 100644
--- 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
index 79b701ab..eaae34d8 100644
--- 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
index 60b6f081..7fe4ad6e 100644
--- 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
index 4cffa150..5d5bfe8f 100644
--- 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
index e14268d8..0af26b4f 100644
--- 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 {