[v4] Support old important modifier position (#13103)

* Support old important modifier position

* update

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>

packages/tailwindcss/src/candidate.ts

@@ -269,6 +269,12 @@ export function parseCandidate(
     base = base.slice(0, -1)
   }
 
+  // Legacy syntax with leading `!`, e.g. `!mx-4`.
+  else if (base[0] === '!') {
+    state.important = true
+    base = base.slice(1)
+  }
+
   // Arbitrary properties
   if (base[0] === '[') {
     let [baseWithoutModifier, modifierSegment = null] = segment(base, '/')

packages/tailwindcss/src/index.test.ts

@@ -341,6 +341,14 @@ describe('important', () => {
     `)
   })
 
+  it('should generate an important utility with legacy syntax', () => {
+    expect(run(['!underline'])).toMatchInlineSnapshot(`
+      ".\\!underline {
+        text-decoration-line: underline !important;
+      }"
+    `)
+  })
+
   it('should not mark declarations inside of @keyframes as important', () => {
     expect(
       compileCss(