From cfb568b971b37f4b9abf039f98ac63d66e378d74 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Wed, 6 Mar 2024 10:28:25 -0500
Subject: [PATCH 1/2] Support old important modifier position

---
 packages/tailwindcss/src/candidate.ts  | 7 ++++++-
 packages/tailwindcss/src/index.test.ts | 8 ++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts
index e1ce018ecab8..cf450b790a69 100644
--- a/packages/tailwindcss/src/candidate.ts
+++ b/packages/tailwindcss/src/candidate.ts
@@ -264,7 +264,12 @@ export function parseCandidate(
 
   // Candidates that end with an exclamation mark are the important version with
   // higher specificity of the non-important candidate, e.g. `mx-4!`.
-  if (base[base.length - 1] === '!') {
+  if (base[0] === '!') {
+    state.important = true
+    base = base.slice(1)
+  }
+  // Legacy syntax with leading `!`, e.g. `!mx-4`.
+  else if (base[base.length - 1] === '!') {
     state.important = true
     base = base.slice(0, -1)
   }
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index aaaa6a05835c..7457ac352450 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/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(

From dbe87da656423428916b1aa30c89862aa8a6b27f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 6 Mar 2024 10:53:07 -0500
Subject: [PATCH 2/2] update

---
 packages/tailwindcss/src/candidate.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts
index cf450b790a69..e3f6b92f2827 100644
--- a/packages/tailwindcss/src/candidate.ts
+++ b/packages/tailwindcss/src/candidate.ts
@@ -264,14 +264,15 @@ export function parseCandidate(
 
   // Candidates that end with an exclamation mark are the important version with
   // higher specificity of the non-important candidate, e.g. `mx-4!`.
-  if (base[0] === '!') {
+  if (base[base.length - 1] === '!') {
     state.important = true
-    base = base.slice(1)
+    base = base.slice(0, -1)
   }
+
   // Legacy syntax with leading `!`, e.g. `!mx-4`.
-  else if (base[base.length - 1] === '!') {
+  else if (base[0] === '!') {
     state.important = true
-    base = base.slice(0, -1)
+    base = base.slice(1)
   }
 
   // Arbitrary properties