diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40baa4c42bbd..b63bddc106ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,10 +12,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
 - Support unbalanced parentheses and braces in quotes in arbitrary values and variants ([#13608](https://github.com/tailwindlabs/tailwindcss/pull/13608))
 
-### Changed
-
-- Remove automatic `var(…)` injection ([#13537](https://github.com/tailwindlabs/tailwindcss/pull/13537))
-
 ## Changed
 
 - Use `rem` units for breakpoints by default instead of `px` ([#13469](https://github.com/tailwindlabs/tailwindcss/pull/13469))
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 509b0655644f..999d5f59c113 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -38,7 +38,7 @@ exports[`border-* 1`] = `
   border-width: 12px;
 }
 
-.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-\\[length\\:--my-width\\], .border-\\[line-width\\:--my-width\\] {
   border-style: var(--tw-border-style);
   border-width: var(--my-width);
 }
@@ -66,19 +66,19 @@ exports[`border-* 1`] = `
   border-color: #0088cc80;
 }
 
-.border-\\[color\\:var\\(--my-color\\)\\] {
+.border-\\[--my-color\\] {
   border-color: var(--my-color);
 }
 
-.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-\\[--my-color\\]\\/50 {
   border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-\\[var\\(--my-color\\)\\] {
+.border-\\[color\\:--my-color\\] {
   border-color: var(--my-color);
 }
 
-.border-\\[var\\(--my-color\\)\\]\\/50 {
+.border-\\[color\\:--my-color\\]\\/50 {
   border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -151,7 +151,7 @@ exports[`border-b-* 1`] = `
   border-bottom-width: 12px;
 }
 
-.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-b-\\[length\\:--my-width\\], .border-b-\\[line-width\\:--my-width\\] {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: var(--my-width);
 }
@@ -179,19 +179,19 @@ exports[`border-b-* 1`] = `
   border-bottom-color: #0088cc80;
 }
 
-.border-b-\\[color\\:var\\(--my-color\\)\\] {
+.border-b-\\[--my-color\\] {
   border-bottom-color: var(--my-color);
 }
 
-.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-b-\\[--my-color\\]\\/50 {
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-b-\\[var\\(--my-color\\)\\] {
+.border-b-\\[color\\:--my-color\\] {
   border-bottom-color: var(--my-color);
 }
 
-.border-b-\\[var\\(--my-color\\)\\]\\/50 {
+.border-b-\\[color\\:--my-color\\]\\/50 {
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -264,7 +264,7 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: 12px;
 }
 
-.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-e-\\[length\\:--my-width\\], .border-e-\\[line-width\\:--my-width\\] {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: var(--my-width);
 }
@@ -292,19 +292,19 @@ exports[`border-e-* 1`] = `
   border-inline-end-color: #0088cc80;
 }
 
-.border-e-\\[color\\:var\\(--my-color\\)\\] {
+.border-e-\\[--my-color\\] {
   border-inline-end-color: var(--my-color);
 }
 
-.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-e-\\[--my-color\\]\\/50 {
   border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-e-\\[var\\(--my-color\\)\\] {
+.border-e-\\[color\\:--my-color\\] {
   border-inline-end-color: var(--my-color);
 }
 
-.border-e-\\[var\\(--my-color\\)\\]\\/50 {
+.border-e-\\[color\\:--my-color\\]\\/50 {
   border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -377,7 +377,7 @@ exports[`border-l-* 1`] = `
   border-left-width: 12px;
 }
 
-.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-l-\\[length\\:--my-width\\], .border-l-\\[line-width\\:--my-width\\] {
   border-left-style: var(--tw-border-style);
   border-left-width: var(--my-width);
 }
@@ -405,19 +405,19 @@ exports[`border-l-* 1`] = `
   border-left-color: #0088cc80;
 }
 
-.border-l-\\[color\\:var\\(--my-color\\)\\] {
+.border-l-\\[--my-color\\] {
   border-left-color: var(--my-color);
 }
 
-.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-l-\\[--my-color\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-l-\\[var\\(--my-color\\)\\] {
+.border-l-\\[color\\:--my-color\\] {
   border-left-color: var(--my-color);
 }
 
-.border-l-\\[var\\(--my-color\\)\\]\\/50 {
+.border-l-\\[color\\:--my-color\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -490,7 +490,7 @@ exports[`border-r-* 1`] = `
   border-right-width: 12px;
 }
 
-.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-r-\\[length\\:--my-width\\], .border-r-\\[line-width\\:--my-width\\] {
   border-right-style: var(--tw-border-style);
   border-right-width: var(--my-width);
 }
@@ -518,19 +518,19 @@ exports[`border-r-* 1`] = `
   border-right-color: #0088cc80;
 }
 
-.border-r-\\[color\\:var\\(--my-color\\)\\] {
+.border-r-\\[--my-color\\] {
   border-right-color: var(--my-color);
 }
 
-.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-r-\\[--my-color\\]\\/50 {
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-r-\\[var\\(--my-color\\)\\] {
+.border-r-\\[color\\:--my-color\\] {
   border-right-color: var(--my-color);
 }
 
-.border-r-\\[var\\(--my-color\\)\\]\\/50 {
+.border-r-\\[color\\:--my-color\\]\\/50 {
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -603,7 +603,7 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: 12px;
 }
 
-.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-s-\\[length\\:--my-width\\], .border-s-\\[line-width\\:--my-width\\] {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: var(--my-width);
 }
@@ -631,19 +631,19 @@ exports[`border-s-* 1`] = `
   border-inline-start-color: #0088cc80;
 }
 
-.border-s-\\[color\\:var\\(--my-color\\)\\] {
+.border-s-\\[--my-color\\] {
   border-inline-start-color: var(--my-color);
 }
 
-.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-s-\\[--my-color\\]\\/50 {
   border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-s-\\[var\\(--my-color\\)\\] {
+.border-s-\\[color\\:--my-color\\] {
   border-inline-start-color: var(--my-color);
 }
 
-.border-s-\\[var\\(--my-color\\)\\]\\/50 {
+.border-s-\\[color\\:--my-color\\]\\/50 {
   border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -716,7 +716,7 @@ exports[`border-t-* 1`] = `
   border-top-width: 12px;
 }
 
-.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-t-\\[length\\:--my-width\\], .border-t-\\[line-width\\:--my-width\\] {
   border-top-style: var(--tw-border-style);
   border-top-width: var(--my-width);
 }
@@ -744,19 +744,19 @@ exports[`border-t-* 1`] = `
   border-top-color: #0088cc80;
 }
 
-.border-t-\\[color\\:var\\(--my-color\\)\\] {
+.border-t-\\[--my-color\\] {
   border-top-color: var(--my-color);
 }
 
-.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-t-\\[--my-color\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-t-\\[var\\(--my-color\\)\\] {
+.border-t-\\[color\\:--my-color\\] {
   border-top-color: var(--my-color);
 }
 
-.border-t-\\[var\\(--my-color\\)\\]\\/50 {
+.border-t-\\[color\\:--my-color\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -841,7 +841,7 @@ exports[`border-x-* 1`] = `
   border-right-width: 12px;
 }
 
-.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-x-\\[length\\:--my-width\\], .border-x-\\[line-width\\:--my-width\\] {
   border-left-style: var(--tw-border-style);
   border-right-style: var(--tw-border-style);
   border-left-width: var(--my-width);
@@ -879,22 +879,22 @@ exports[`border-x-* 1`] = `
   border-right-color: #0088cc80;
 }
 
-.border-x-\\[color\\:var\\(--my-color\\)\\] {
+.border-x-\\[--my-color\\] {
   border-left-color: var(--my-color);
   border-right-color: var(--my-color);
 }
 
-.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-x-\\[--my-color\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-x-\\[var\\(--my-color\\)\\] {
+.border-x-\\[color\\:--my-color\\] {
   border-left-color: var(--my-color);
   border-right-color: var(--my-color);
 }
 
-.border-x-\\[var\\(--my-color\\)\\]\\/50 {
+.border-x-\\[color\\:--my-color\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
@@ -986,7 +986,7 @@ exports[`border-y-* 1`] = `
   border-bottom-width: 12px;
 }
 
-.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
+.border-y-\\[length\\:--my-width\\], .border-y-\\[line-width\\:--my-width\\] {
   border-top-style: var(--tw-border-style);
   border-bottom-style: var(--tw-border-style);
   border-top-width: var(--my-width);
@@ -1024,22 +1024,22 @@ exports[`border-y-* 1`] = `
   border-bottom-color: #0088cc80;
 }
 
-.border-y-\\[color\\:var\\(--my-color\\)\\] {
+.border-y-\\[--my-color\\] {
   border-top-color: var(--my-color);
   border-bottom-color: var(--my-color);
 }
 
-.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+.border-y-\\[--my-color\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-y-\\[var\\(--my-color\\)\\] {
+.border-y-\\[color\\:--my-color\\] {
   border-top-color: var(--my-color);
   border-bottom-color: var(--my-color);
 }
 
-.border-y-\\[var\\(--my-color\\)\\]\\/50 {
+.border-y-\\[color\\:--my-color\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
diff --git a/packages/tailwindcss/src/candidate.test.ts b/packages/tailwindcss/src/candidate.test.ts
index 28b2b5d7e657..80c3e5d53591 100644
--- a/packages/tailwindcss/src/candidate.test.ts
+++ b/packages/tailwindcss/src/candidate.test.ts
@@ -359,23 +359,24 @@ it('should parse a utility with an arbitrary modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/[50%]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": {
-        "kind": "arbitrary",
-        "value": "50%",
-      },
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "fraction": null,
-        "kind": "named",
-        "value": "red-500",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": {
+          "dashedIdent": null,
+          "kind": "arbitrary",
+          "value": "50%",
+        },
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "fraction": null,
+          "kind": "named",
+          "value": "red-500",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with a modifier that is important', () => {
@@ -440,20 +441,21 @@ it('should parse a utility with an arbitrary value', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "#0088cc",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "#0088cc",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value including a typehint', () => {
@@ -461,20 +463,21 @@ it('should parse a utility with an arbitrary value including a typehint', () =>
   utilities.functional('bg', () => [])
 
   expect(run('bg-[color:var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": "color",
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": "color",
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value with a modifier', () => {
@@ -482,23 +485,24 @@ it('should parse a utility with an arbitrary value with a modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]/50', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": {
-        "kind": "named",
-        "value": "50",
-      },
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "#0088cc",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": {
+          "kind": "named",
+          "value": "50",
+        },
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "#0088cc",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value with an arbitrary modifier', () => {
@@ -506,23 +510,25 @@ it('should parse a utility with an arbitrary value with an arbitrary modifier',
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]/[50%]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": {
-        "kind": "arbitrary",
-        "value": "50%",
-      },
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "#0088cc",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": {
+          "dashedIdent": null,
+          "kind": "arbitrary",
+          "value": "50%",
+        },
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "#0088cc",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an arbitrary value that is important', () => {
@@ -530,62 +536,65 @@ it('should parse a utility with an arbitrary value that is important', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-[#0088cc]!', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": true,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "#0088cc",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": true,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "#0088cc",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the arbitrary value', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "variants": [],
-    }
-  `)
+  expect(run('bg-[--value]', { utilities })).toMatchInlineSnapshot(`
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": "--value",
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the arbitrary value that is important', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": true,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "variants": [],
-    }
-  `)
+  expect(run('bg-[--value]!', { utilities })).toMatchInlineSnapshot(`
+      {
+        "important": true,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": "--value",
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the arbitrary value', () => {
@@ -593,20 +602,21 @@ it('should parse a utility with an explicit variable as the arbitrary value', ()
   utilities.functional('bg', () => [])
 
   expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the arbitrary value that is important', () => {
@@ -614,68 +624,71 @@ it('should parse a utility with an explicit variable as the arbitrary value that
   utilities.functional('bg', () => [])
 
   expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": true,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": true,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the modifier', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": {
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "fraction": null,
-        "kind": "named",
-        "value": "red-500",
-      },
-      "variants": [],
-    }
-  `)
+  expect(run('bg-red-500/[--value]', { utilities })).toMatchInlineSnapshot(`
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": {
+          "dashedIdent": "--value",
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "fraction": null,
+          "kind": "named",
+          "value": "red-500",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an implicit variable as the modifier that is important', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])
 
-  expect(run('bg-red-500/[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": true,
-      "kind": "functional",
-      "modifier": {
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "fraction": null,
-        "kind": "named",
-        "value": "red-500",
-      },
-      "variants": [],
-    }
-  `)
+  expect(run('bg-red-500/[--value]!', { utilities })).toMatchInlineSnapshot(`
+      {
+        "important": true,
+        "kind": "functional",
+        "modifier": {
+          "dashedIdent": "--value",
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "fraction": null,
+          "kind": "named",
+          "value": "red-500",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the modifier', () => {
@@ -683,23 +696,24 @@ it('should parse a utility with an explicit variable as the modifier', () => {
   utilities.functional('bg', () => [])
 
   expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": {
-        "kind": "arbitrary",
-        "value": "var(--value)",
-      },
-      "negative": false,
-      "root": "bg",
-      "value": {
-        "fraction": null,
-        "kind": "named",
-        "value": "red-500",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": {
+          "dashedIdent": null,
+          "kind": "arbitrary",
+          "value": "var(--value)",
+        },
+        "negative": false,
+        "root": "bg",
+        "value": {
+          "fraction": null,
+          "kind": "named",
+          "value": "red-500",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should parse a utility with an explicit variable as the modifier that is important', () => {
@@ -711,6 +725,7 @@ it('should parse a utility with an explicit variable as the modifier that is imp
       "important": true,
       "kind": "functional",
       "modifier": {
+        "dashedIdent": null,
         "kind": "arbitrary",
         "value": "var(--value)",
       },
@@ -848,20 +863,21 @@ it('should replace `_` with ` `', () => {
   utilities.functional('content', () => [])
 
   expect(run('content-["hello_world"]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "content",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": ""hello world"",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "content",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": ""hello world"",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should not replace `\\_` with ` ` (when it is escaped)', () => {
@@ -869,20 +885,21 @@ it('should not replace `\\_` with ` ` (when it is escaped)', () => {
   utilities.functional('content', () => [])
 
   expect(run('content-["hello\\_world"]', { utilities })).toMatchInlineSnapshot(`
-    {
-      "important": false,
-      "kind": "functional",
-      "modifier": null,
-      "negative": false,
-      "root": "content",
-      "value": {
-        "dataType": null,
-        "kind": "arbitrary",
-        "value": ""hello_world"",
-      },
-      "variants": [],
-    }
-  `)
+      {
+        "important": false,
+        "kind": "functional",
+        "modifier": null,
+        "negative": false,
+        "root": "content",
+        "value": {
+          "dashedIdent": null,
+          "dataType": null,
+          "kind": "arbitrary",
+          "value": ""hello_world"",
+        },
+        "variants": [],
+      }
+    `)
 })
 
 it('should not replace `_` inside of `url()`', () => {
@@ -897,6 +914,7 @@ it('should not replace `_` inside of `url()`', () => {
       "negative": false,
       "root": "bg",
       "value": {
+        "dashedIdent": null,
         "dataType": null,
         "kind": "arbitrary",
         "value": "url(https://example.com/some_page)",
diff --git a/packages/tailwindcss/src/candidate.ts b/packages/tailwindcss/src/candidate.ts
index 101df17626c5..71a4aa88025a 100644
--- a/packages/tailwindcss/src/candidate.ts
+++ b/packages/tailwindcss/src/candidate.ts
@@ -11,7 +11,7 @@ type ArbitraryUtilityValue = {
   kind: 'arbitrary'
 
   /**
-   * bg-[color:var(--my-color)]
+   * bg-[color:--my-color]
    *     ^^^^^
    */
   dataType: string | null
@@ -19,8 +19,16 @@ type ArbitraryUtilityValue = {
   /**
    * bg-[#0088cc]
    *     ^^^^^^^
+   * bg-[--my_variable]
+   * var(^^^^^^^^^^^^^)
    */
   value: string
+
+  /**
+   * bg-[--my_variable]
+   *     ^^^^^^^^^^^^^
+   */
+  dashedIdent: string | null
 }
 
 export type NamedUtilityValue = {
@@ -50,6 +58,12 @@ type ArbitraryModifier = {
    *             ^^^
    */
   value: string
+
+  /**
+   * bg-red-500/[--my_variable]
+   *             ^^^^^^^^^^^^^
+   */
+  dashedIdent: string | null
 }
 
 type NamedModifier = {
@@ -366,10 +380,26 @@ export function parseCandidate(input: string, designSystem: DesignSystem): Candi
         break
       }
 
+      // If an arbitrary value looks like a CSS variable, we automatically wrap
+      // it with `var(...)`.
+      //
+      // But since some CSS properties accept a `<dashed-ident>` as a value
+      // directly (e.g. `scroll-timeline-name`), we also store the original
+      // value in case the utility matcher is interested in it without
+      // `var(...)`.
+      let dashedIdent: string | null = null
+      if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
+        dashedIdent = arbitraryValue
+        arbitraryValue = `var(${arbitraryValue})`
+      } else {
+        arbitraryValue = decodeArbitraryValue(arbitraryValue)
+      }
+
       candidate.value = {
         kind: 'arbitrary',
         dataType: typehint || null,
-        value: decodeArbitraryValue(arbitraryValue),
+        value: arbitraryValue,
+        dashedIdent,
       }
     } else {
       // Some utilities support fractions as values, e.g. `w-1/2`. Since it's
@@ -402,9 +432,25 @@ function parseModifier(modifier: string): CandidateModifier {
   if (modifier[0] === '[' && modifier[modifier.length - 1] === ']') {
     let arbitraryValue = modifier.slice(1, -1)
 
+    // If an arbitrary value looks like a CSS variable, we automatically wrap
+    // it with `var(...)`.
+    //
+    // But since some CSS properties accept a `<dashed-ident>` as a value
+    // directly (e.g. `scroll-timeline-name`), we also store the original
+    // value in case the utility matcher is interested in it without
+    // `var(...)`.
+    let dashedIdent: string | null = null
+    if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
+      dashedIdent = arbitraryValue
+      arbitraryValue = `var(${arbitraryValue})`
+    } else {
+      arbitraryValue = decodeArbitraryValue(arbitraryValue)
+    }
+
     return {
       kind: 'arbitrary',
-      value: decodeArbitraryValue(arbitraryValue),
+      value: arbitraryValue,
+      dashedIdent,
     }
   }
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 2d727fc86b55..7357288c9bab 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -17,7 +17,7 @@ test('sr-only', () => {
       overflow: hidden;
     }"
   `)
-  expect(run(['-sr-only', 'sr-only-[var(--value)]'])).toEqual('')
+  expect(run(['-sr-only', 'sr-only-[--value]'])).toEqual('')
 })
 
 test('not-sr-only', () => {
@@ -33,7 +33,7 @@ test('not-sr-only', () => {
       overflow: visible;
     }"
   `)
-  expect(run(['-not-sr-only', 'not-sr-only-[var(--value)]'])).toEqual('')
+  expect(run(['-not-sr-only', 'not-sr-only-[--value]'])).toEqual('')
 })
 
 test('pointer-events', () => {
@@ -46,9 +46,9 @@ test('pointer-events', () => {
       pointer-events: none;
     }"
   `)
-  expect(
-    run(['-pointer-events-none', '-pointer-events-auto', 'pointer-events-[var(--value)]']),
-  ).toEqual('')
+  expect(run(['-pointer-events-none', '-pointer-events-auto', 'pointer-events-[--value]'])).toEqual(
+    '',
+  )
 })
 
 test('visibility', () => {
@@ -593,12 +593,12 @@ test('isolation', () => {
 })
 
 test('z-index', () => {
-  expect(run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[var(--value)]'])).toMatchInlineSnapshot(`
+  expect(run(['z-auto', 'z-10', '-z-10', 'z-[123]', '-z-[--value]'])).toMatchInlineSnapshot(`
     ".-z-10 {
       z-index: calc(10 * -1);
     }
 
-    .-z-\\[var\\(--value\\)\\] {
+    .-z-\\[--value\\] {
       z-index: calc(var(--value) * -1);
     }
 
@@ -623,7 +623,7 @@ test('order', () => {
       'order-4',
       '-order-4',
       'order-[123]',
-      '-order-[var(--value)]',
+      '-order-[--value]',
       'order-first',
       'order-last',
       'order-none',
@@ -633,7 +633,7 @@ test('order', () => {
       order: calc(4 * -1);
     }
 
-    .-order-\\[var\\(--value\\)\\] {
+    .-order-\\[--value\\] {
       order: calc(var(--value) * -1);
     }
 
@@ -670,7 +670,7 @@ test('col', () => {
       'col-span-17',
       'col-span-full',
       'col-[span_123/span_123]',
-      'col-span-[var(--my-variable)]',
+      'col-span-[--my-variable]',
     ]),
   ).toMatchInlineSnapshot(`
     ".col-\\[span_123\\/span_123\\] {
@@ -689,7 +689,7 @@ test('col', () => {
       grid-column: span 17 / span 17;
     }
 
-    .col-span-\\[var\\(--my-variable\\)\\] {
+    .col-span-\\[--my-variable\\] {
       grid-column: span var(--my-variable) / span var(--my-variable);
     }
 
@@ -751,7 +751,7 @@ test('row', () => {
       'row-span-17',
       'row-span-full',
       'row-[span_123/span_123]',
-      'row-span-[var(--my-variable)]',
+      'row-span-[--my-variable]',
     ]),
   ).toMatchInlineSnapshot(`
     ".row-\\[span_123\\/span_123\\] {
@@ -770,7 +770,7 @@ test('row', () => {
       grid-row: span 17 / span 17;
     }
 
-    .row-span-\\[var\\(--my-variable\\)\\] {
+    .row-span-\\[--my-variable\\] {
       grid-row: span var(--my-variable) / span var(--my-variable);
     }
 
@@ -901,7 +901,7 @@ test('margin', () => {
         }
         @tailwind utilities;
       `,
-      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[var(--value)]'],
+      ['m-auto', 'm-4', 'm-[4px]', '-m-4', '-m-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -912,7 +912,7 @@ test('margin', () => {
       margin: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-m-\\[var\\(--value\\)\\] {
+    .-m-\\[--value\\] {
       margin: calc(var(--value) * -1);
     }
 
@@ -940,7 +940,7 @@ test('margin-x', () => {
         }
         @tailwind utilities;
       `,
-      ['mx-auto', 'mx-4', 'mx-[4px]', '-mx-4', '-mx-[var(--value)]'],
+      ['mx-auto', 'mx-4', 'mx-[4px]', '-mx-4', '-mx-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -952,7 +952,7 @@ test('margin-x', () => {
       margin-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-mx-\\[var\\(--value\\)\\] {
+    .-mx-\\[--value\\] {
       margin-left: calc(var(--value) * -1);
       margin-right: calc(var(--value) * -1);
     }
@@ -984,7 +984,7 @@ test('margin-y', () => {
         }
         @tailwind utilities;
       `,
-      ['my-auto', 'my-4', 'my-[4px]', '-my-4', '-my-[var(--value)]'],
+      ['my-auto', 'my-4', 'my-[4px]', '-my-4', '-my-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -996,7 +996,7 @@ test('margin-y', () => {
       margin-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-my-\\[var\\(--value\\)\\] {
+    .-my-\\[--value\\] {
       margin-top: calc(var(--value) * -1);
       margin-bottom: calc(var(--value) * -1);
     }
@@ -1028,7 +1028,7 @@ test('margin-top', () => {
         }
         @tailwind utilities;
       `,
-      ['mt-auto', 'mt-4', 'mt-[4px]', '-mt-4', '-mt-[var(--value)]'],
+      ['mt-auto', 'mt-4', 'mt-[4px]', '-mt-4', '-mt-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -1039,7 +1039,7 @@ test('margin-top', () => {
       margin-top: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-mt-\\[var\\(--value\\)\\] {
+    .-mt-\\[--value\\] {
       margin-top: calc(var(--value) * -1);
     }
 
@@ -1067,7 +1067,7 @@ test('margin-inline-start', () => {
         }
         @tailwind utilities;
       `,
-      ['ms-auto', 'ms-4', 'ms-[4px]', '-ms-4', '-ms-[var(--value)]'],
+      ['ms-auto', 'ms-4', 'ms-[4px]', '-ms-4', '-ms-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -1078,7 +1078,7 @@ test('margin-inline-start', () => {
       margin-inline-start: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-ms-\\[var\\(--value\\)\\] {
+    .-ms-\\[--value\\] {
       margin-inline-start: calc(var(--value) * -1);
     }
 
@@ -1106,7 +1106,7 @@ test('margin-inline-end', () => {
         }
         @tailwind utilities;
       `,
-      ['me-auto', 'me-4', 'me-[4px]', '-me-4', '-me-[var(--value)]'],
+      ['me-auto', 'me-4', 'me-[4px]', '-me-4', '-me-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -1117,7 +1117,7 @@ test('margin-inline-end', () => {
       margin-inline-end: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-me-\\[var\\(--value\\)\\] {
+    .-me-\\[--value\\] {
       margin-inline-end: calc(var(--value) * -1);
     }
 
@@ -1145,7 +1145,7 @@ test('margin-right', () => {
         }
         @tailwind utilities;
       `,
-      ['mr-auto', 'mr-4', 'mr-[4px]', '-mr-4', '-mr-[var(--value)]'],
+      ['mr-auto', 'mr-4', 'mr-[4px]', '-mr-4', '-mr-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -1156,7 +1156,7 @@ test('margin-right', () => {
       margin-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-mr-\\[var\\(--value\\)\\] {
+    .-mr-\\[--value\\] {
       margin-right: calc(var(--value) * -1);
     }
 
@@ -1184,7 +1184,7 @@ test('margin-bottom', () => {
         }
         @tailwind utilities;
       `,
-      ['mb-auto', 'mb-4', 'mb-[4px]', '-mb-4', '-mb-[var(--value)]'],
+      ['mb-auto', 'mb-4', 'mb-[4px]', '-mb-4', '-mb-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -1195,7 +1195,7 @@ test('margin-bottom', () => {
       margin-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-mb-\\[var\\(--value\\)\\] {
+    .-mb-\\[--value\\] {
       margin-bottom: calc(var(--value) * -1);
     }
 
@@ -1223,7 +1223,7 @@ test('margin-left', () => {
         }
         @tailwind utilities;
       `,
-      ['ml-auto', 'ml-4', 'ml-[4px]', '-ml-4', '-ml-[var(--value)]'],
+      ['ml-auto', 'ml-4', 'ml-[4px]', '-ml-4', '-ml-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -1234,7 +1234,7 @@ test('margin-left', () => {
       margin-left: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-ml-\\[var\\(--value\\)\\] {
+    .-ml-\\[--value\\] {
       margin-left: calc(var(--value) * -1);
     }
 
@@ -2314,15 +2314,15 @@ test('origin', () => {
       'origin-left',
       'origin-top-left',
       'origin-[50px_100px]',
-      'origin-[var(--value)]',
+      'origin-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".origin-\\[50px_100px\\] {
-      transform-origin: 50px 100px;
+    ".origin-\\[--value\\] {
+      transform-origin: var(--value);
     }
 
-    .origin-\\[var\\(--value\\)\\] {
-      transform-origin: var(--value);
+    .origin-\\[50px_100px\\] {
+      transform-origin: 50px 100px;
     }
 
     .origin-bottom {
@@ -2361,7 +2361,7 @@ test('origin', () => {
       transform-origin: 100% 0;
     }"
   `)
-  expect(run(['-origin-center', '-origin-[var(--value)]'])).toEqual('')
+  expect(run(['-origin-center', '-origin-[--value]'])).toEqual('')
 })
 
 test('perspective-origin', () => {
@@ -2377,15 +2377,15 @@ test('perspective-origin', () => {
       'perspective-origin-left',
       'perspective-origin-top-left',
       'perspective-origin-[50px_100px]',
-      'perspective-origin-[var(--value)]',
+      'perspective-origin-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".perspective-origin-\\[50px_100px\\] {
-      perspective-origin: 50px 100px;
+    ".perspective-origin-\\[--value\\] {
+      perspective-origin: var(--value);
     }
 
-    .perspective-origin-\\[var\\(--value\\)\\] {
-      perspective-origin: var(--value);
+    .perspective-origin-\\[50px_100px\\] {
+      perspective-origin: 50px 100px;
     }
 
     .perspective-origin-bottom {
@@ -2424,7 +2424,7 @@ test('perspective-origin', () => {
       perspective-origin: 100% 0;
     }"
   `)
-  expect(run(['-perspective-origin-center', '-perspective-origin-[var(--value)]'])).toEqual('')
+  expect(run(['-perspective-origin-center', '-perspective-origin-[--value]'])).toEqual('')
 })
 
 test('translate', () => {
@@ -2434,10 +2434,10 @@ test('translate', () => {
       'translate-full',
       '-translate-full',
       'translate-[123px]',
-      '-translate-[var(--value)]',
+      '-translate-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".-translate-\\[var\\(--value\\)\\] {
+    ".-translate-\\[--value\\] {
       --tw-translate-x: calc(var(--value) * -1);
       --tw-translate-y: calc(var(--value) * -1);
       --tw-translate-z: calc(var(--value) * -1);
@@ -2494,103 +2494,101 @@ test('translate', () => {
 })
 
 test('translate-x', () => {
-  expect(
-    run(['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[var(--value)]']),
-  ).toMatchInlineSnapshot(`
-    ".-translate-x-\\[var\\(--value\\)\\] {
-      --tw-translate-x: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+  expect(run(['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[--value]']))
+    .toMatchInlineSnapshot(`
+      ".-translate-x-\\[--value\\] {
+        --tw-translate-x: calc(var(--value) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    .-translate-x-full {
-      --tw-translate-x: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+      .-translate-x-full {
+        --tw-translate-x: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    .translate-x-full {
-      --tw-translate-x: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+      .translate-x-full {
+        --tw-translate-x: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    .translate-x-px {
-      --tw-translate-x: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+      .translate-x-px {
+        --tw-translate-x: 1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    @property --tw-translate-x {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-x {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-y {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-y {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-z {
-      syntax: "<length>";
-      inherits: false;
-      initial-value: 0;
-    }"
-  `)
+      @property --tw-translate-z {
+        syntax: "<length>";
+        inherits: false;
+        initial-value: 0;
+      }"
+    `)
   expect(run(['translate-x'])).toEqual('')
 })
 
 test('translate-y', () => {
-  expect(
-    run(['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[var(--value)]']),
-  ).toMatchInlineSnapshot(`
-    ".-translate-y-\\[var\\(--value\\)\\] {
-      --tw-translate-y: calc(var(--value) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+  expect(run(['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[--value]']))
+    .toMatchInlineSnapshot(`
+      ".-translate-y-\\[--value\\] {
+        --tw-translate-y: calc(var(--value) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    .-translate-y-full {
-      --tw-translate-y: -100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+      .-translate-y-full {
+        --tw-translate-y: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    .translate-y-full {
-      --tw-translate-y: 100%;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+      .translate-y-full {
+        --tw-translate-y: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    .translate-y-px {
-      --tw-translate-y: 1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
+      .translate-y-px {
+        --tw-translate-y: 1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
 
-    @property --tw-translate-x {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-x {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-y {
-      syntax: "<length-percentage>";
-      inherits: false;
-      initial-value: 0;
-    }
+      @property --tw-translate-y {
+        syntax: "<length-percentage>";
+        inherits: false;
+        initial-value: 0;
+      }
 
-    @property --tw-translate-z {
-      syntax: "<length>";
-      inherits: false;
-      initial-value: 0;
-    }"
-  `)
+      @property --tw-translate-z {
+        syntax: "<length>";
+        inherits: false;
+        initial-value: 0;
+      }"
+    `)
   expect(run(['translate-y'])).toEqual('')
 })
 
 test('translate-z', () => {
-  expect(run(['translate-y-px', '-translate-z-[var(--value)]'])).toMatchInlineSnapshot(`
+  expect(run(['translate-y-px', '-translate-z-[--value]'])).toMatchInlineSnapshot(`
     ".translate-y-px {
       --tw-translate-y: 1px;
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    .-translate-z-\\[var\\(--value\\)\\] {
+    .-translate-z-\\[--value\\] {
       --tw-translate-z: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
     }
@@ -3332,7 +3330,7 @@ test('cursor', () => {
         'cursor-nwse-resize',
         'cursor-zoom-in',
         'cursor-zoom-out',
-        'cursor-[var(--value)]',
+        'cursor-[--value]',
         'cursor-custom',
       ],
     ),
@@ -3341,7 +3339,7 @@ test('cursor', () => {
       --cursor-custom: url("/my-cursor.png");
     }
 
-    .cursor-\\[var\\(--value\\)\\] {
+    .cursor-\\[--value\\] {
       cursor: var(--value);
     }
 
@@ -3532,7 +3530,7 @@ test('cursor', () => {
       '-cursor-nwse-resize',
       '-cursor-zoom-in',
       '-cursor-zoom-out',
-      '-cursor-[var(--value)]',
+      '-cursor-[--value]',
       '-cursor-custom',
     ]),
   ).toEqual('')
@@ -3783,7 +3781,7 @@ test('scroll-m', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[var(--value)]'],
+      ['scroll-m-4', 'scroll-m-[4px]', '-scroll-m-4', '-scroll-m-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -3794,7 +3792,7 @@ test('scroll-m', () => {
       scroll-margin: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-m-\\[var\\(--value\\)\\] {
+    .-scroll-m-\\[--value\\] {
       scroll-margin: calc(var(--value) * -1);
     }
 
@@ -3818,7 +3816,7 @@ test('scroll-mx', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[var(--value)]'],
+      ['scroll-mx-4', 'scroll-mx-[4px]', '-scroll-mx-4', '-scroll-mx-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -3830,7 +3828,7 @@ test('scroll-mx', () => {
       scroll-margin-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mx-\\[var\\(--value\\)\\] {
+    .-scroll-mx-\\[--value\\] {
       scroll-margin-left: calc(var(--value) * -1);
       scroll-margin-right: calc(var(--value) * -1);
     }
@@ -3857,7 +3855,7 @@ test('scroll-my', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[var(--value)]'],
+      ['scroll-my-4', 'scroll-my-[4px]', '-scroll-my-4', '-scroll-my-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -3869,7 +3867,7 @@ test('scroll-my', () => {
       scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-my-\\[var\\(--value\\)\\] {
+    .-scroll-my-\\[--value\\] {
       scroll-margin-top: calc(var(--value) * -1);
       scroll-margin-bottom: calc(var(--value) * -1);
     }
@@ -3896,7 +3894,7 @@ test('scroll-ms', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[var(--value)]'],
+      ['scroll-ms-4', 'scroll-ms-[4px]', '-scroll-ms-4', '-scroll-ms-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -3907,7 +3905,7 @@ test('scroll-ms', () => {
       scroll-margin-inline-start: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-ms-\\[var\\(--value\\)\\] {
+    .-scroll-ms-\\[--value\\] {
       scroll-margin-inline-start: calc(var(--value) * -1);
     }
 
@@ -3931,7 +3929,7 @@ test('scroll-me', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[var(--value)]'],
+      ['scroll-me-4', 'scroll-me-[4px]', '-scroll-me-4', '-scroll-me-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -3942,7 +3940,7 @@ test('scroll-me', () => {
       scroll-margin-inline-end: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-me-\\[var\\(--value\\)\\] {
+    .-scroll-me-\\[--value\\] {
       scroll-margin-inline-end: calc(var(--value) * -1);
     }
 
@@ -3966,7 +3964,7 @@ test('scroll-mt', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[var(--value)]'],
+      ['scroll-mt-4', 'scroll-mt-[4px]', '-scroll-mt-4', '-scroll-mt-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -3977,7 +3975,7 @@ test('scroll-mt', () => {
       scroll-margin-top: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mt-\\[var\\(--value\\)\\] {
+    .-scroll-mt-\\[--value\\] {
       scroll-margin-top: calc(var(--value) * -1);
     }
 
@@ -4001,7 +3999,7 @@ test('scroll-mr', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[var(--value)]'],
+      ['scroll-mr-4', 'scroll-mr-[4px]', '-scroll-mr-4', '-scroll-mr-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4012,7 +4010,7 @@ test('scroll-mr', () => {
       scroll-margin-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mr-\\[var\\(--value\\)\\] {
+    .-scroll-mr-\\[--value\\] {
       scroll-margin-right: calc(var(--value) * -1);
     }
 
@@ -4036,7 +4034,7 @@ test('scroll-mb', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[var(--value)]'],
+      ['scroll-mb-4', 'scroll-mb-[4px]', '-scroll-mb-4', '-scroll-mb-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4047,7 +4045,7 @@ test('scroll-mb', () => {
       scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-mb-\\[var\\(--value\\)\\] {
+    .-scroll-mb-\\[--value\\] {
       scroll-margin-bottom: calc(var(--value) * -1);
     }
 
@@ -4071,7 +4069,7 @@ test('scroll-ml', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[var(--value)]'],
+      ['scroll-ml-4', 'scroll-ml-[4px]', '-scroll-ml-4', '-scroll-ml-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4082,7 +4080,7 @@ test('scroll-ml', () => {
       scroll-margin-left: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-ml-\\[var\\(--value\\)\\] {
+    .-scroll-ml-\\[--value\\] {
       scroll-margin-left: calc(var(--value) * -1);
     }
 
@@ -4106,7 +4104,7 @@ test('scroll-p', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[var(--value)]'],
+      ['scroll-p-4', 'scroll-p-[4px]', '-scroll-p-4', '-scroll-p-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4117,7 +4115,7 @@ test('scroll-p', () => {
       scroll-padding: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-p-\\[var\\(--value\\)\\] {
+    .-scroll-p-\\[--value\\] {
       scroll-padding: calc(var(--value) * -1);
     }
 
@@ -4141,7 +4139,7 @@ test('scroll-px', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[var(--value)]'],
+      ['scroll-px-4', 'scroll-px-[4px]', '-scroll-px-4', '-scroll-px-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4153,7 +4151,7 @@ test('scroll-px', () => {
       scroll-padding-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-px-\\[var\\(--value\\)\\] {
+    .-scroll-px-\\[--value\\] {
       scroll-padding-left: calc(var(--value) * -1);
       scroll-padding-right: calc(var(--value) * -1);
     }
@@ -4180,7 +4178,7 @@ test('scroll-py', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[var(--value)]'],
+      ['scroll-py-4', 'scroll-py-[4px]', '-scroll-py-4', '-scroll-py-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4192,7 +4190,7 @@ test('scroll-py', () => {
       scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-py-\\[var\\(--value\\)\\] {
+    .-scroll-py-\\[--value\\] {
       scroll-padding-top: calc(var(--value) * -1);
       scroll-padding-bottom: calc(var(--value) * -1);
     }
@@ -4219,7 +4217,7 @@ test('scroll-ps', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[var(--value)]'],
+      ['scroll-ps-4', 'scroll-ps-[4px]', '-scroll-ps-4', '-scroll-ps-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4230,7 +4228,7 @@ test('scroll-ps', () => {
       scroll-padding-inline-start: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-ps-\\[var\\(--value\\)\\] {
+    .-scroll-ps-\\[--value\\] {
       scroll-padding-inline-start: calc(var(--value) * -1);
     }
 
@@ -4254,7 +4252,7 @@ test('scroll-pe', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[var(--value)]'],
+      ['scroll-pe-4', 'scroll-pe-[4px]', '-scroll-pe-4', '-scroll-pe-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4265,7 +4263,7 @@ test('scroll-pe', () => {
       scroll-padding-inline-end: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-pe-\\[var\\(--value\\)\\] {
+    .-scroll-pe-\\[--value\\] {
       scroll-padding-inline-end: calc(var(--value) * -1);
     }
 
@@ -4289,7 +4287,7 @@ test('scroll-pt', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[var(--value)]'],
+      ['scroll-pt-4', 'scroll-pt-[4px]', '-scroll-pt-4', '-scroll-pt-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4300,7 +4298,7 @@ test('scroll-pt', () => {
       scroll-padding-top: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-pt-\\[var\\(--value\\)\\] {
+    .-scroll-pt-\\[--value\\] {
       scroll-padding-top: calc(var(--value) * -1);
     }
 
@@ -4324,7 +4322,7 @@ test('scroll-pr', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[var(--value)]'],
+      ['scroll-pr-4', 'scroll-pr-[4px]', '-scroll-pr-4', '-scroll-pr-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4335,7 +4333,7 @@ test('scroll-pr', () => {
       scroll-padding-right: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-pr-\\[var\\(--value\\)\\] {
+    .-scroll-pr-\\[--value\\] {
       scroll-padding-right: calc(var(--value) * -1);
     }
 
@@ -4359,7 +4357,7 @@ test('scroll-pb', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[var(--value)]'],
+      ['scroll-pb-4', 'scroll-pb-[4px]', '-scroll-pb-4', '-scroll-pb-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4370,7 +4368,7 @@ test('scroll-pb', () => {
       scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-pb-\\[var\\(--value\\)\\] {
+    .-scroll-pb-\\[--value\\] {
       scroll-padding-bottom: calc(var(--value) * -1);
     }
 
@@ -4394,7 +4392,7 @@ test('scroll-pl', () => {
         }
         @tailwind utilities;
       `,
-      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[var(--value)]'],
+      ['scroll-pl-4', 'scroll-pl-[4px]', '-scroll-pl-4', '-scroll-pl-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -4405,7 +4403,7 @@ test('scroll-pl', () => {
       scroll-padding-left: calc(var(--spacing-4, 1rem) * -1);
     }
 
-    .-scroll-pl-\\[var\\(--value\\)\\] {
+    .-scroll-pl-\\[--value\\] {
       scroll-padding-left: calc(var(--value) * -1);
     }
 
@@ -4434,30 +4432,29 @@ test('list-style-position', () => {
 })
 
 test('list', () => {
-  expect(run(['list-none', 'list-disc', 'list-decimal', 'list-[var(--value)]']))
-    .toMatchInlineSnapshot(`
-      ".list-\\[var\\(--value\\)\\] {
-        list-style-type: var(--value);
-      }
+  expect(run(['list-none', 'list-disc', 'list-decimal', 'list-[--value]'])).toMatchInlineSnapshot(`
+    ".list-\\[--value\\] {
+      list-style-type: var(--value);
+    }
 
-      .list-decimal {
-        list-style-type: decimal;
-      }
+    .list-decimal {
+      list-style-type: decimal;
+    }
 
-      .list-disc {
-        list-style-type: disc;
-      }
+    .list-disc {
+      list-style-type: disc;
+    }
 
-      .list-none {
-        list-style-type: none;
-      }"
-    `)
-  expect(run(['-list-none', '-list-disc', '-list-decimal', '-list-[var(--value)]'])).toEqual('')
+    .list-none {
+      list-style-type: none;
+    }"
+  `)
+  expect(run(['-list-none', '-list-disc', '-list-decimal', '-list-[--value]'])).toEqual('')
 })
 
 test('list-image', () => {
-  expect(run(['list-image-none', 'list-image-[var(--value)]'])).toMatchInlineSnapshot(`
-    ".list-image-\\[var\\(--value\\)\\] {
+  expect(run(['list-image-none', 'list-image-[--value]'])).toMatchInlineSnapshot(`
+    ".list-image-\\[--value\\] {
       list-style-image: var(--value);
     }
 
@@ -4465,7 +4462,7 @@ test('list-image', () => {
       list-style-image: none;
     }"
   `)
-  expect(run(['list-image', '-list-image-none', '-list-image-[var(--value)]'])).toEqual('')
+  expect(run(['list-image', '-list-image-none', '-list-image-[--value]'])).toEqual('')
 })
 
 test('appearance', () => {
@@ -4498,7 +4495,7 @@ test('columns', () => {
         'columns-4',
         'columns-99',
         'columns-[123]',
-        'columns-[var(--value)]',
+        'columns-[--value]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -4523,12 +4520,12 @@ test('columns', () => {
       columns: 99;
     }
 
-    .columns-\\[123\\] {
-      columns: 123;
+    .columns-\\[--value\\] {
+      columns: var(--value);
     }
 
-    .columns-\\[var\\(--value\\)\\] {
-      columns: var(--value);
+    .columns-\\[123\\] {
+      columns: 123;
     }
 
     .columns-auto {
@@ -4536,7 +4533,7 @@ test('columns', () => {
     }"
   `)
   expect(
-    run(['columns', '-columns-4', '-columns-[123]', '-columns-[var(--value)]', 'columns-unknown']),
+    run(['columns', '-columns-4', '-columns-[123]', '-columns-[--value]', 'columns-unknown']),
   ).toEqual('')
 })
 
@@ -7234,8 +7231,8 @@ for (let prefix of prefixes) {
     classes.push(`${prefix}-[medium]`)
     classes.push(`${prefix}-[thick]`)
     classes.push(`${prefix}-[12px]`)
-    classes.push(`${prefix}-[length:var(--my-width)]`)
-    classes.push(`${prefix}-[line-width:var(--my-width)]`)
+    classes.push(`${prefix}-[length:--my-width]`)
+    classes.push(`${prefix}-[line-width:--my-width]`)
 
     // Color
     classes.push(`${prefix}-red-500`)
@@ -7248,10 +7245,10 @@ for (let prefix of prefixes) {
     classes.push(`${prefix}-transparent`)
 
     // Inference: Color
-    classes.push(`${prefix}-[var(--my-color)]`)
-    classes.push(`${prefix}-[var(--my-color)]/50`)
-    classes.push(`${prefix}-[color:var(--my-color)]`)
-    classes.push(`${prefix}-[color:var(--my-color)]/50`)
+    classes.push(`${prefix}-[--my-color]`)
+    classes.push(`${prefix}-[--my-color]/50`)
+    classes.push(`${prefix}-[color:--my-color]`)
+    classes.push(`${prefix}-[color:--my-color]/50`)
 
     expect(
       compileCss(
@@ -7327,14 +7324,14 @@ test('bg', () => {
         'bg-[#0088cc]/50',
         'bg-[#0088cc]/[0.5]',
         'bg-[#0088cc]/[50%]',
-        'bg-[var(--some-var)]',
-        'bg-[var(--some-var)]/50',
-        'bg-[var(--some-var)]/[0.5]',
-        'bg-[var(--some-var)]/[50%]',
-        'bg-[color:var(--some-var)]',
-        'bg-[color:var(--some-var)]/50',
-        'bg-[color:var(--some-var)]/[0.5]',
-        'bg-[color:var(--some-var)]/[50%]',
+        'bg-[--some-var]',
+        'bg-[--some-var]/50',
+        'bg-[--some-var]/[0.5]',
+        'bg-[--some-var]/[50%]',
+        'bg-[color:--some-var]',
+        'bg-[color:--some-var]/50',
+        'bg-[color:--some-var]/[0.5]',
+        'bg-[color:--some-var]/[50%]',
 
         // background-image
         'bg-none',
@@ -7347,9 +7344,9 @@ test('bg', () => {
         'bg-gradient-to-l',
         'bg-gradient-to-tl',
         'bg-[url(/image.png)]',
-        'bg-[url:var(--my-url)]',
+        'bg-[url:--my-url]',
         'bg-[linear-gradient(to_bottom,red,blue)]',
-        'bg-[image:var(--my-gradient)]',
+        'bg-[image:--my-gradient]',
 
         // background-size
         'bg-auto',
@@ -7400,19 +7397,19 @@ test('bg', () => {
       background-color: #0088cc80;
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\] {
+    .bg-\\[--some-var\\] {
       background-color: var(--some-var);
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\]\\/50, .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
+    .bg-\\[--some-var\\]\\/50, .bg-\\[--some-var\\]\\/\\[0\\.5\\], .bg-\\[--some-var\\]\\/\\[50\\%\\] {
       background-color: color-mix(in srgb, var(--some-var) 50%, transparent);
     }
 
-    .bg-\\[var\\(--some-var\\)\\] {
+    .bg-\\[color\\:--some-var\\] {
       background-color: var(--some-var);
     }
 
-    .bg-\\[var\\(--some-var\\)\\]\\/50, .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
+    .bg-\\[color\\:--some-var\\]\\/50, .bg-\\[color\\:--some-var\\]\\/\\[0\\.5\\], .bg-\\[color\\:--some-var\\]\\/\\[50\\%\\] {
       background-color: color-mix(in srgb, var(--some-var) 50%, transparent);
     }
 
@@ -7440,7 +7437,7 @@ test('bg', () => {
       background-color: #0000;
     }
 
-    .bg-\\[image\\:var\\(--my-gradient\\)\\] {
+    .bg-\\[image\\:--my-gradient\\] {
       background-image: var(--my-gradient);
     }
 
@@ -7452,7 +7449,7 @@ test('bg', () => {
       background-image: url("/image.png");
     }
 
-    .bg-\\[url\\:var\\(--my-url\\)\\] {
+    .bg-\\[url\\:--my-url\\] {
       background-image: var(--my-url);
     }
 
@@ -7703,14 +7700,14 @@ test('from', () => {
         'from-[#0088cc]/50',
         'from-[#0088cc]/[0.5]',
         'from-[#0088cc]/[50%]',
-        'from-[var(--my-color)]',
-        'from-[var(--my-color)]/50',
-        'from-[var(--my-color)]/[0.5]',
-        'from-[var(--my-color)]/[50%]',
-        'from-[color:var(--my-color)]',
-        'from-[color:var(--my-color)]/50',
-        'from-[color:var(--my-color)]/[0.5]',
-        'from-[color:var(--my-color)]/[50%]',
+        'from-[--my-color]',
+        'from-[--my-color]/50',
+        'from-[--my-color]/[0.5]',
+        'from-[--my-color]/[50%]',
+        'from-[color:--my-color]',
+        'from-[color:--my-color]/50',
+        'from-[color:--my-color]/[0.5]',
+        'from-[color:--my-color]/[50%]',
 
         // --tw-gradient-from-position
         'from-0%',
@@ -7718,8 +7715,8 @@ test('from', () => {
         'from-100%',
         'from-[50%]',
         'from-[50px]',
-        'from-[length:var(--my-position)]',
-        'from-[percentage:var(--my-position)]',
+        'from-[length:--my-position]',
+        'from-[percentage:--my-position]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -7737,22 +7734,22 @@ test('from', () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[color\\:var\\(--my-color\\)\\] {
+    .from-\\[--my-color\\] {
       --tw-gradient-from: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/50, .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .from-\\[--my-color\\]\\/50, .from-\\[--my-color\\]\\/\\[0\\.5\\], .from-\\[--my-color\\]\\/\\[50\\%\\] {
       --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[var\\(--my-color\\)\\] {
+    .from-\\[color\\:--my-color\\] {
       --tw-gradient-from: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[var\\(--my-color\\)\\]\\/50, .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .from-\\[color\\:--my-color\\]\\/50, .from-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .from-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       --tw-gradient-from: color-mix(in srgb, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
@@ -7807,7 +7804,7 @@ test('from', () => {
       --tw-gradient-from-position: 50px;
     }
 
-    .from-\\[length\\:var\\(--my-position\\)\\], .from-\\[percentage\\:var\\(--my-position\\)\\] {
+    .from-\\[length\\:--my-position\\], .from-\\[percentage\\:--my-position\\] {
       --tw-gradient-from-position: var(--my-position);
     }
 
@@ -7913,14 +7910,14 @@ test('via', () => {
         'via-[#0088cc]/50',
         'via-[#0088cc]/[0.5]',
         'via-[#0088cc]/[50%]',
-        'via-[var(--my-color)]',
-        'via-[var(--my-color)]/50',
-        'via-[var(--my-color)]/[0.5]',
-        'via-[var(--my-color)]/[50%]',
-        'via-[color:var(--my-color)]',
-        'via-[color:var(--my-color)]/50',
-        'via-[color:var(--my-color)]/[0.5]',
-        'via-[color:var(--my-color)]/[50%]',
+        'via-[--my-color]',
+        'via-[--my-color]/50',
+        'via-[--my-color]/[0.5]',
+        'via-[--my-color]/[50%]',
+        'via-[color:--my-color]',
+        'via-[color:--my-color]/50',
+        'via-[color:--my-color]/[0.5]',
+        'via-[color:--my-color]/[50%]',
 
         // --tw-gradient-via-position
         'via-0%',
@@ -7928,8 +7925,8 @@ test('via', () => {
         'via-100%',
         'via-[50%]',
         'via-[50px]',
-        'via-[length:var(--my-position)]',
-        'via-[percentage:var(--my-position)]',
+        'via-[length:--my-position]',
+        'via-[percentage:--my-position]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -7949,25 +7946,25 @@ test('via', () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\] {
+    .via-\\[--my-color\\] {
       --tw-gradient-via: var(--my-color);
       --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/50, .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .via-\\[--my-color\\]\\/50, .via-\\[--my-color\\]\\/\\[0\\.5\\], .via-\\[--my-color\\]\\/\\[50\\%\\] {
       --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent);
       --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[var\\(--my-color\\)\\] {
+    .via-\\[color\\:--my-color\\] {
       --tw-gradient-via: var(--my-color);
       --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[var\\(--my-color\\)\\]\\/50, .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .via-\\[color\\:--my-color\\]\\/50, .via-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .via-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       --tw-gradient-via: color-mix(in srgb, var(--my-color) 50%, transparent);
       --tw-gradient-via-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
@@ -8029,7 +8026,7 @@ test('via', () => {
       --tw-gradient-via-position: 50px;
     }
 
-    .via-\\[length\\:var\\(--my-position\\)\\], .via-\\[percentage\\:var\\(--my-position\\)\\] {
+    .via-\\[length\\:--my-position\\], .via-\\[percentage\\:--my-position\\] {
       --tw-gradient-via-position: var(--my-position);
     }
 
@@ -8135,14 +8132,14 @@ test('to', () => {
         'to-[#0088cc]/50',
         'to-[#0088cc]/[0.5]',
         'to-[#0088cc]/[50%]',
-        'to-[var(--my-color)]',
-        'to-[var(--my-color)]/50',
-        'to-[var(--my-color)]/[0.5]',
-        'to-[var(--my-color)]/[50%]',
-        'to-[color:var(--my-color)]',
-        'to-[color:var(--my-color)]/50',
-        'to-[color:var(--my-color)]/[0.5]',
-        'to-[color:var(--my-color)]/[50%]',
+        'to-[--my-color]',
+        'to-[--my-color]/50',
+        'to-[--my-color]/[0.5]',
+        'to-[--my-color]/[50%]',
+        'to-[color:--my-color]',
+        'to-[color:--my-color]/50',
+        'to-[color:--my-color]/[0.5]',
+        'to-[color:--my-color]/[50%]',
 
         // --tw-gradient-to-position
         'to-0%',
@@ -8150,8 +8147,8 @@ test('to', () => {
         'to-100%',
         'to-[50%]',
         'to-[50px]',
-        'to-[length:var(--my-position)]',
-        'to-[percentage:var(--my-position)]',
+        'to-[length:--my-position]',
+        'to-[percentage:--my-position]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -8169,22 +8166,22 @@ test('to', () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[color\\:var\\(--my-color\\)\\] {
+    .to-\\[--my-color\\] {
       --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/50, .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .to-\\[--my-color\\]\\/50, .to-\\[--my-color\\]\\/\\[0\\.5\\], .to-\\[--my-color\\]\\/\\[50\\%\\] {
       --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[var\\(--my-color\\)\\] {
+    .to-\\[color\\:--my-color\\] {
       --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[var\\(--my-color\\)\\]\\/50, .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .to-\\[color\\:--my-color\\]\\/50, .to-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .to-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       --tw-gradient-to: color-mix(in srgb, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
@@ -8239,7 +8236,7 @@ test('to', () => {
       --tw-gradient-to-position: 50px;
     }
 
-    .to-\\[length\\:var\\(--my-position\\)\\], .to-\\[percentage\\:var\\(--my-position\\)\\] {
+    .to-\\[length\\:--my-position\\], .to-\\[percentage\\:--my-position\\] {
       --tw-gradient-to-position: var(--my-position);
     }
 
@@ -8718,14 +8715,14 @@ test('stroke', () => {
         'stroke-[#0088cc]/50',
         'stroke-[#0088cc]/[0.5]',
         'stroke-[#0088cc]/[50%]',
-        'stroke-[var(--my-color)]',
-        'stroke-[var(--my-color)]/50',
-        'stroke-[var(--my-color)]/[0.5]',
-        'stroke-[var(--my-color)]/[50%]',
-        'stroke-[color:var(--my-color)]',
-        'stroke-[color:var(--my-color)]/50',
-        'stroke-[color:var(--my-color)]/[0.5]',
-        'stroke-[color:var(--my-color)]/[50%]',
+        'stroke-[--my-color]',
+        'stroke-[--my-color]/50',
+        'stroke-[--my-color]/[0.5]',
+        'stroke-[--my-color]/[50%]',
+        'stroke-[color:--my-color]',
+        'stroke-[color:--my-color]/50',
+        'stroke-[color:--my-color]/[0.5]',
+        'stroke-[color:--my-color]/[50%]',
         'stroke-none',
 
         // Width
@@ -8735,9 +8732,9 @@ test('stroke', () => {
         'stroke-[1.5]',
         'stroke-[12px]',
         'stroke-[50%]',
-        'stroke-[number:var(--my-width)]',
-        'stroke-[length:var(--my-width)]',
-        'stroke-[percentage:var(--my-width)]',
+        'stroke-[number:--my-width]',
+        'stroke-[length:--my-width]',
+        'stroke-[percentage:--my-width]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -8753,19 +8750,19 @@ test('stroke', () => {
       stroke: #0088cc80;
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\] {
+    .stroke-\\[--my-color\\] {
       stroke: var(--my-color);
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50, .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .stroke-\\[--my-color\\]\\/50, .stroke-\\[--my-color\\]\\/\\[0\\.5\\], .stroke-\\[--my-color\\]\\/\\[50\\%\\] {
       stroke: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .stroke-\\[var\\(--my-color\\)\\] {
+    .stroke-\\[color\\:--my-color\\] {
       stroke: var(--my-color);
     }
 
-    .stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .stroke-\\[color\\:--my-color\\]\\/50, .stroke-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .stroke-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       stroke: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
@@ -8821,7 +8818,7 @@ test('stroke', () => {
       stroke-width: 50%;
     }
 
-    .stroke-\\[length\\:var\\(--my-width\\)\\], .stroke-\\[number\\:var\\(--my-width\\)\\], .stroke-\\[percentage\\:var\\(--my-width\\)\\] {
+    .stroke-\\[length\\:--my-width\\], .stroke-\\[number\\:--my-width\\], .stroke-\\[percentage\\:--my-width\\] {
       stroke-width: var(--my-width);
     }"
   `)
@@ -8863,7 +8860,7 @@ test('object', () => {
       'object-scale-down',
 
       // object-position
-      'object-[var(--value)]',
+      'object-[--value]',
       'object-bottom',
       'object-center',
       'object-left',
@@ -8895,7 +8892,7 @@ test('object', () => {
       object-fit: scale-down;
     }
 
-    .object-\\[var\\(--value\\)\\] {
+    .object-\\[--value\\] {
       object-position: var(--value);
     }
 
@@ -8946,7 +8943,7 @@ test('object', () => {
       '-object-scale-down',
 
       // object-position
-      '-object-[var(--value)]',
+      '-object-[--value]',
       '-object-bottom',
     ]),
   ).toEqual('')
@@ -9256,10 +9253,10 @@ test('align', () => {
       'align-sub',
       'align-super',
 
-      'align-[var(--value)]',
+      'align-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".align-\\[var\\(--value\\)\\] {
+    ".align-\\[--value\\] {
       vertical-align: var(--value);
     }
 
@@ -9307,7 +9304,7 @@ test('align', () => {
       '-align-sub',
       '-align-super',
 
-      '-align-[var(--value)]',
+      '-align-[--value]',
     ]),
   ).toEqual('')
 })
@@ -9327,14 +9324,14 @@ test('font', () => {
         'font-sans',
         'font-["arial_rounded"]',
         'font-[ui-sans-serif]',
-        'font-[var(--my-family)]',
-        'font-[family-name:var(--my-family)]',
-        'font-[generic-name:var(--my-family)]',
+        'font-[--my-family]',
+        'font-[family-name:--my-family]',
+        'font-[generic-name:--my-family]',
 
         // font-weight
         'font-bold',
         'font-[100]',
-        'font-[number:var(--my-weight)]',
+        'font-[number:--my-weight]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -9346,7 +9343,7 @@ test('font', () => {
       font-family: arial rounded;
     }
 
-    .font-\\[family-name\\:var\\(--my-family\\)\\], .font-\\[generic-name\\:var\\(--my-family\\)\\] {
+    .font-\\[family-name\\:--my-family\\], .font-\\[generic-name\\:--my-family\\] {
       font-family: var(--my-family);
     }
 
@@ -9358,18 +9355,18 @@ test('font', () => {
       font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     }
 
+    .font-\\[--my-family\\] {
+      font-weight: var(--my-family);
+    }
+
     .font-\\[100\\] {
       font-weight: 100;
     }
 
-    .font-\\[number\\:var\\(--my-weight\\)\\] {
+    .font-\\[number\\:--my-weight\\] {
       font-weight: var(--my-weight);
     }
 
-    .font-\\[var\\(--my-family\\)\\] {
-      font-weight: var(--my-family);
-    }
-
     .font-bold {
       font-weight: 700;
     }"
@@ -9600,14 +9597,14 @@ test('decoration', () => {
         'decoration-[#0088cc]/50',
         'decoration-[#0088cc]/[0.5]',
         'decoration-[#0088cc]/[50%]',
-        'decoration-[var(--my-color)]',
-        'decoration-[var(--my-color)]/50',
-        'decoration-[var(--my-color)]/[0.5]',
-        'decoration-[var(--my-color)]/[50%]',
-        'decoration-[color:var(--my-color)]',
-        'decoration-[color:var(--my-color)]/50',
-        'decoration-[color:var(--my-color)]/[0.5]',
-        'decoration-[color:var(--my-color)]/[50%]',
+        'decoration-[--my-color]',
+        'decoration-[--my-color]/50',
+        'decoration-[--my-color]/[0.5]',
+        'decoration-[--my-color]/[50%]',
+        'decoration-[color:--my-color]',
+        'decoration-[color:--my-color]/50',
+        'decoration-[color:--my-color]/[0.5]',
+        'decoration-[color:--my-color]/[50%]',
 
         // text-decoration-style
         'decoration-solid',
@@ -9626,8 +9623,8 @@ test('decoration', () => {
         'decoration-123',
         'decoration-[12px]',
         'decoration-[50%]',
-        'decoration-[length:var(--my-thickness)]',
-        'decoration-[percentage:var(--my-thickness)]',
+        'decoration-[length:--my-thickness]',
+        'decoration-[percentage:--my-thickness]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -9643,22 +9640,22 @@ test('decoration', () => {
       text-decoration-color: #0088cc80;
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\] {
+    .decoration-\\[--my-color\\] {
       -webkit-text-decoration-color: var(--my-color);
       text-decoration-color: var(--my-color);
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50, .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .decoration-\\[--my-color\\]\\/50, .decoration-\\[--my-color\\]\\/\\[0\\.5\\], .decoration-\\[--my-color\\]\\/\\[50\\%\\] {
       -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
       text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .decoration-\\[var\\(--my-color\\)\\] {
+    .decoration-\\[color\\:--my-color\\] {
       -webkit-text-decoration-color: var(--my-color);
       text-decoration-color: var(--my-color);
     }
 
-    .decoration-\\[var\\(--my-color\\)\\]\\/50, .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .decoration-\\[color\\:--my-color\\]\\/50, .decoration-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .decoration-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       -webkit-text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
       text-decoration-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
@@ -9739,7 +9736,7 @@ test('decoration', () => {
       text-decoration-thickness: calc(1em / 2);
     }
 
-    .decoration-\\[length\\:var\\(--my-thickness\\)\\], .decoration-\\[percentage\\:var\\(--my-thickness\\)\\] {
+    .decoration-\\[length\\:--my-thickness\\], .decoration-\\[percentage\\:--my-thickness\\] {
       text-decoration-thickness: var(--my-thickness);
     }
 
@@ -9841,7 +9838,7 @@ test('filter', () => {
       [
         'filter',
         'filter-none',
-        'filter-[var(--value)]',
+        'filter-[--value]',
         'blur-xl',
         'blur-[4px]',
         'brightness-50',
@@ -9850,21 +9847,21 @@ test('filter', () => {
         'contrast-[1.23]',
         'grayscale',
         'grayscale-0',
-        'grayscale-[var(--value)]',
+        'grayscale-[--value]',
         'hue-rotate-15',
         'hue-rotate-[45deg]',
         'invert',
         'invert-0',
-        'invert-[var(--value)]',
+        'invert-[--value]',
         'drop-shadow-xl',
         'drop-shadow-[0_0_red]',
         'saturate-0',
         'saturate-[1.75]',
-        'saturate-[var(--value)]',
+        'saturate-[--value]',
         'sepia',
         'sepia-0',
         'sepia-[50%]',
-        'sepia-[var(--value)]',
+        'sepia-[--value]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -9924,7 +9921,7 @@ test('filter', () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .grayscale-\\[var\\(--value\\)\\] {
+    .grayscale-\\[--value\\] {
       --tw-grayscale: grayscale(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
@@ -9949,7 +9946,7 @@ test('filter', () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .invert-\\[var\\(--value\\)\\] {
+    .invert-\\[--value\\] {
       --tw-invert: invert(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
@@ -9959,13 +9956,13 @@ test('filter', () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .saturate-\\[1\\.75\\] {
-      --tw-saturate: saturate(1.75);
+    .saturate-\\[--value\\] {
+      --tw-saturate: saturate(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .saturate-\\[var\\(--value\\)\\] {
-      --tw-saturate: saturate(var(--value));
+    .saturate-\\[1\\.75\\] {
+      --tw-saturate: saturate(1.75);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
@@ -9979,13 +9976,13 @@ test('filter', () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .sepia-\\[50\\%\\] {
-      --tw-sepia: sepia(50%);
+    .sepia-\\[--value\\] {
+      --tw-sepia: sepia(var(--value));
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .sepia-\\[var\\(--value\\)\\] {
-      --tw-sepia: sepia(var(--value));
+    .sepia-\\[50\\%\\] {
+      --tw-sepia: sepia(50%);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
@@ -9993,7 +9990,7 @@ test('filter', () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
-    .filter-\\[var\\(--value\\)\\] {
+    .filter-\\[--value\\] {
       filter: var(--value);
     }
 
@@ -10050,7 +10047,7 @@ test('filter', () => {
     run([
       '-filter',
       '-filter-none',
-      '-filter-[var(--value)]',
+      '-filter-[--value]',
       '-blur-xl',
       '-blur-[4px]',
       '-brightness-50',
@@ -10061,25 +10058,25 @@ test('filter', () => {
       'contrast-unknown',
       '-grayscale',
       '-grayscale-0',
-      '-grayscale-[var(--value)]',
+      '-grayscale-[--value]',
       'grayscale-unknown',
       '-hue-rotate-15',
       '-hue-rotate-[45deg]',
       'hue-rotate-unknown',
       '-invert',
       '-invert-0',
-      '-invert-[var(--value)]',
+      '-invert-[--value]',
       'invert-unknown',
       '-drop-shadow-xl',
       '-drop-shadow-[0_0_red]',
       '-saturate-0',
       '-saturate-[1.75]',
-      '-saturate-[var(--value)]',
+      '-saturate-[--value]',
       'saturate-saturate',
       '-sepia',
       '-sepia-0',
       '-sepia-[50%]',
-      '-sepia-[var(--value)]',
+      '-sepia-[--value]',
       'sepia-unknown',
     ]),
   ).toEqual('')
@@ -10097,7 +10094,7 @@ test('backdrop-filter', () => {
       [
         'backdrop-filter',
         'backdrop-filter-none',
-        'backdrop-filter-[var(--value)]',
+        'backdrop-filter-[--value]',
         'backdrop-blur-xl',
         'backdrop-blur-[4px]',
         'backdrop-brightness-50',
@@ -10106,22 +10103,22 @@ test('backdrop-filter', () => {
         'backdrop-contrast-[1.23]',
         'backdrop-grayscale',
         'backdrop-grayscale-0',
-        'backdrop-grayscale-[var(--value)]',
+        'backdrop-grayscale-[--value]',
         'backdrop-hue-rotate-15',
         'backdrop-hue-rotate-[45deg]',
         'backdrop-invert',
         'backdrop-invert-0',
-        'backdrop-invert-[var(--value)]',
+        'backdrop-invert-[--value]',
         'backdrop-opacity-50',
         'backdrop-opacity-71',
         'backdrop-opacity-[0.5]',
         'backdrop-saturate-0',
         'backdrop-saturate-[1.75]',
-        'backdrop-saturate-[var(--value)]',
+        'backdrop-saturate-[--value]',
         'backdrop-sepia',
         'backdrop-sepia-0',
         'backdrop-sepia-[50%]',
-        'backdrop-sepia-[var(--value)]',
+        'backdrop-sepia-[--value]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -10177,7 +10174,7 @@ test('backdrop-filter', () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-grayscale-\\[var\\(--value\\)\\] {
+    .backdrop-grayscale-\\[--value\\] {
       --tw-backdrop-grayscale: grayscale(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -10207,7 +10204,7 @@ test('backdrop-filter', () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-invert-\\[var\\(--value\\)\\] {
+    .backdrop-invert-\\[--value\\] {
       --tw-backdrop-invert: invert(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -10237,14 +10234,14 @@ test('backdrop-filter', () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-saturate-\\[1\\.75\\] {
-      --tw-backdrop-saturate: saturate(1.75);
+    .backdrop-saturate-\\[--value\\] {
+      --tw-backdrop-saturate: saturate(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-saturate-\\[var\\(--value\\)\\] {
-      --tw-backdrop-saturate: saturate(var(--value));
+    .backdrop-saturate-\\[1\\.75\\] {
+      --tw-backdrop-saturate: saturate(1.75);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
@@ -10261,14 +10258,14 @@ test('backdrop-filter', () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-sepia-\\[50\\%\\] {
-      --tw-backdrop-sepia: sepia(50%);
+    .backdrop-sepia-\\[--value\\] {
+      --tw-backdrop-sepia: sepia(var(--value));
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-sepia-\\[var\\(--value\\)\\] {
-      --tw-backdrop-sepia: sepia(var(--value));
+    .backdrop-sepia-\\[50\\%\\] {
+      --tw-backdrop-sepia: sepia(50%);
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
@@ -10278,7 +10275,7 @@ test('backdrop-filter', () => {
       backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
 
-    .backdrop-filter-\\[var\\(--value\\)\\] {
+    .backdrop-filter-\\[--value\\] {
       -webkit-backdrop-filter: var(--value);
       backdrop-filter: var(--value);
     }
@@ -10337,7 +10334,7 @@ test('backdrop-filter', () => {
     run([
       '-backdrop-filter',
       '-backdrop-filter-none',
-      '-backdrop-filter-[var(--value)]',
+      '-backdrop-filter-[--value]',
       '-backdrop-blur-xl',
       '-backdrop-blur-[4px]',
       '-backdrop-brightness-50',
@@ -10348,26 +10345,26 @@ test('backdrop-filter', () => {
       'backdrop-contrast-unknown',
       '-backdrop-grayscale',
       '-backdrop-grayscale-0',
-      '-backdrop-grayscale-[var(--value)]',
+      '-backdrop-grayscale-[--value]',
       'backdrop-grayscale-unknown',
       '-backdrop-hue-rotate-15',
       '-backdrop-hue-rotate-[45deg]',
       'backdrop-hue-rotate-unknown',
       '-backdrop-invert',
       '-backdrop-invert-0',
-      '-backdrop-invert-[var(--value)]',
+      '-backdrop-invert-[--value]',
       'backdrop-invert-unknown',
       '-backdrop-opacity-50',
       '-backdrop-opacity-[0.5]',
       'backdrop-opacity-unknown',
       '-backdrop-saturate-0',
       '-backdrop-saturate-[1.75]',
-      '-backdrop-saturate-[var(--value)]',
+      '-backdrop-saturate-[--value]',
       'backdrop-saturate-unknown',
       '-backdrop-sepia',
       '-backdrop-sepia-0',
       '-backdrop-sepia-[50%]',
-      '-backdrop-sepia-[var(--value)]',
+      '-backdrop-sepia-[--value]',
       'backdrop-sepia-unknown',
     ]),
   ).toEqual('')
@@ -10394,7 +10391,7 @@ test('transition', () => {
         'transition-shadow',
         'transition-colors',
         'transition-opacity',
-        'transition-[var(--value)]',
+        'transition-[--value]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -10411,7 +10408,7 @@ test('transition', () => {
       transition-timing-function: ease;
     }
 
-    .transition-\\[var\\(--value\\)\\] {
+    .transition-\\[--value\\] {
       transition-property: var(--value);
       transition-duration: .1s;
       transition-timing-function: ease;
@@ -10473,7 +10470,7 @@ test('transition', () => {
       '-transition-none',
       '-transition-all',
       '-transition-opacity',
-      '-transition-[var(--value)]',
+      '-transition-[--value]',
     ]),
   ).toEqual('')
 })
@@ -10522,7 +10519,7 @@ test('ease', () => {
         }
         @tailwind utilities;
       `,
-      ['ease-in', 'ease-out', 'ease-[var(--value)]'],
+      ['ease-in', 'ease-out', 'ease-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -10530,7 +10527,7 @@ test('ease', () => {
       --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
     }
 
-    .ease-\\[var\\(--value\\)\\] {
+    .ease-\\[--value\\] {
       transition-timing-function: var(--value);
     }
 
@@ -10542,7 +10539,7 @@ test('ease', () => {
       transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, .2, 1));
     }"
   `)
-  expect(run(['-ease-in', '-ease-out', '-ease-[var(--value)]'])).toEqual('')
+  expect(run(['-ease-in', '-ease-out', '-ease-[--value]'])).toEqual('')
 })
 
 test('will-change', () => {
@@ -10552,10 +10549,10 @@ test('will-change', () => {
       'will-change-contents',
       'will-change-transform',
       'will-change-scroll',
-      'will-change-[var(--value)]',
+      'will-change-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
-    ".will-change-\\[var\\(--value\\)\\] {
+    ".will-change-\\[--value\\] {
       will-change: var(--value);
     }
 
@@ -10582,7 +10579,7 @@ test('will-change', () => {
       '-will-change-contents',
       '-will-change-transform',
       '-will-change-scroll',
-      '-will-change-[var(--value)]',
+      '-will-change-[--value]',
     ]),
   ).toEqual('')
 })
@@ -10711,7 +10708,7 @@ test('leading', () => {
         }
         @tailwind utilities;
       `,
-      ['leading-none', 'leading-6', 'leading-[var(--value)]'],
+      ['leading-none', 'leading-6', 'leading-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -10723,7 +10720,7 @@ test('leading', () => {
       line-height: var(--line-height-6, 1.5rem);
     }
 
-    .leading-\\[var\\(--value\\)\\] {
+    .leading-\\[--value\\] {
       line-height: var(--value);
     }
 
@@ -10731,7 +10728,7 @@ test('leading', () => {
       line-height: var(--line-height-none, 1);
     }"
   `)
-  expect(run(['leading', '-leading-none', '-leading-6', '-leading-[var(--value)]'])).toEqual('')
+  expect(run(['leading', '-leading-none', '-leading-6', '-leading-[--value]'])).toEqual('')
 })
 
 test('tracking', () => {
@@ -10744,7 +10741,7 @@ test('tracking', () => {
         }
         @tailwind utilities;
       `,
-      ['tracking-normal', 'tracking-wide', 'tracking-[var(--value)]', '-tracking-[var(--value)]'],
+      ['tracking-normal', 'tracking-wide', 'tracking-[--value]', '-tracking-[--value]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
@@ -10752,11 +10749,11 @@ test('tracking', () => {
       --letter-spacing-wide: .025em;
     }
 
-    .-tracking-\\[var\\(--value\\)\\] {
+    .-tracking-\\[--value\\] {
       letter-spacing: calc(var(--value) * -1);
     }
 
-    .tracking-\\[var\\(--value\\)\\] {
+    .tracking-\\[--value\\] {
       letter-spacing: var(--value);
     }
 
@@ -10922,23 +10919,23 @@ test('outline', () => {
         'outline-[black]/50',
         'outline-[black]/[0.5]',
         'outline-[black]/[50%]',
-        'outline-[var(--value)]',
-        'outline-[var(--value)]/50',
-        'outline-[var(--value)]/[0.5]',
-        'outline-[var(--value)]/[50%]',
-        'outline-[color:var(--value)]',
-        'outline-[color:var(--value)]/50',
-        'outline-[color:var(--value)]/[0.5]',
-        'outline-[color:var(--value)]/[50%]',
+        'outline-[--value]',
+        'outline-[--value]/50',
+        'outline-[--value]/[0.5]',
+        'outline-[--value]/[50%]',
+        'outline-[color:--value]',
+        'outline-[color:--value]/50',
+        'outline-[color:--value]/[0.5]',
+        'outline-[color:--value]/[50%]',
 
         // outline-width
         'outline-0',
         'outline-[1.5]',
         'outline-[12px]',
         'outline-[50%]',
-        'outline-[number:var(--my-width)]',
-        'outline-[length:var(--my-width)]',
-        'outline-[percentage:var(--my-width)]',
+        'outline-[number:--my-width]',
+        'outline-[length:--my-width]',
+        'outline-[percentage:--my-width]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -10976,7 +10973,7 @@ test('outline', () => {
       outline-width: 50%;
     }
 
-    .outline-\\[length\\:var\\(--my-width\\)\\], .outline-\\[number\\:var\\(--my-width\\)\\], .outline-\\[percentage\\:var\\(--my-width\\)\\] {
+    .outline-\\[length\\:--my-width\\], .outline-\\[number\\:--my-width\\], .outline-\\[percentage\\:--my-width\\] {
       outline-style: var(--tw-outline-style);
       outline-width: var(--my-width);
     }
@@ -10989,27 +10986,27 @@ test('outline', () => {
       outline-color: #0088cc80;
     }
 
-    .outline-\\[black\\] {
-      outline-color: #000;
+    .outline-\\[--value\\] {
+      outline-color: var(--value);
     }
 
-    .outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] {
-      outline-color: #00000080;
+    .outline-\\[--value\\]\\/50, .outline-\\[--value\\]\\/\\[0\\.5\\], .outline-\\[--value\\]\\/\\[50\\%\\] {
+      outline-color: color-mix(in srgb, var(--value) 50%, transparent);
     }
 
-    .outline-\\[color\\:var\\(--value\\)\\] {
-      outline-color: var(--value);
+    .outline-\\[black\\] {
+      outline-color: #000;
     }
 
-    .outline-\\[color\\:var\\(--value\\)\\]\\/50, .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: color-mix(in srgb, var(--value) 50%, transparent);
+    .outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] {
+      outline-color: #00000080;
     }
 
-    .outline-\\[var\\(--value\\)\\] {
+    .outline-\\[color\\:--value\\] {
       outline-color: var(--value);
     }
 
-    .outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
+    .outline-\\[color\\:--value\\]\\/50, .outline-\\[color\\:--value\\]\\/\\[0\\.5\\], .outline-\\[color\\:--value\\]\\/\\[50\\%\\] {
       outline-color: color-mix(in srgb, var(--value) 50%, transparent);
     }
 
@@ -11101,15 +11098,15 @@ test('outline-offset', () => {
     run([
       'outline-offset-4',
       '-outline-offset-4',
-      'outline-offset-[var(--value)]',
-      '-outline-offset-[var(--value)]',
+      'outline-offset-[--value]',
+      '-outline-offset-[--value]',
     ]),
   ).toMatchInlineSnapshot(`
     ".-outline-offset-4 {
       outline-offset: calc(4px * -1);
     }
 
-    .-outline-offset-\\[var\\(--value\\)\\] {
+    .-outline-offset-\\[--value\\] {
       outline-offset: calc(var(--value) * -1);
     }
 
@@ -11117,7 +11114,7 @@ test('outline-offset', () => {
       outline-offset: 4px;
     }
 
-    .outline-offset-\\[var\\(--value\\)\\] {
+    .outline-offset-\\[--value\\] {
       outline-offset: var(--value);
     }"
   `)
@@ -11125,16 +11122,16 @@ test('outline-offset', () => {
 })
 
 test('opacity', () => {
-  expect(run(['opacity-15', 'opacity-[var(--value)]'])).toMatchInlineSnapshot(`
+  expect(run(['opacity-15', 'opacity-[--value]'])).toMatchInlineSnapshot(`
     ".opacity-15 {
       opacity: .15;
     }
 
-    .opacity-\\[var\\(--value\\)\\] {
+    .opacity-\\[--value\\] {
       opacity: var(--value);
     }"
   `)
-  expect(run(['opacity', '-opacity-15', '-opacity-[var(--value)]', 'opacity-unknown'])).toEqual('')
+  expect(run(['opacity', '-opacity-15', '-opacity-[--value]', 'opacity-unknown'])).toEqual('')
 })
 
 test('underline-offset', () => {
@@ -11151,8 +11148,8 @@ test('underline-offset', () => {
         '-underline-offset-4',
         'underline-offset-123',
         '-underline-offset-123',
-        'underline-offset-[var(--value)]',
-        '-underline-offset-[var(--value)]',
+        'underline-offset-[--value]',
+        '-underline-offset-[--value]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11164,7 +11161,7 @@ test('underline-offset', () => {
       text-underline-offset: calc(123px * -1);
     }
 
-    .-underline-offset-\\[var\\(--value\\)\\] {
+    .-underline-offset-\\[--value\\] {
       text-underline-offset: calc(var(--value) * -1);
     }
 
@@ -11176,7 +11173,7 @@ test('underline-offset', () => {
       text-underline-offset: 123px;
     }
 
-    .underline-offset-\\[var\\(--value\\)\\] {
+    .underline-offset-\\[--value\\] {
       text-underline-offset: var(--value);
     }
 
@@ -11219,14 +11216,14 @@ test('text', () => {
         'text-[#0088cc]/[0.5]',
         'text-[#0088cc]/[50%]',
 
-        'text-[var(--my-color)]',
-        'text-[var(--my-color)]/50',
-        'text-[var(--my-color)]/[0.5]',
-        'text-[var(--my-color)]/[50%]',
-        'text-[color:var(--my-color)]',
-        'text-[color:var(--my-color)]/50',
-        'text-[color:var(--my-color)]/[0.5]',
-        'text-[color:var(--my-color)]/[50%]',
+        'text-[--my-color]',
+        'text-[--my-color]/50',
+        'text-[--my-color]/[0.5]',
+        'text-[--my-color]/[50%]',
+        'text-[color:--my-color]',
+        'text-[color:--my-color]/50',
+        'text-[color:--my-color]/[0.5]',
+        'text-[color:--my-color]/[50%]',
 
         // font-size / line-height / letter-spacing / font-weight
         'text-sm',
@@ -11240,10 +11237,10 @@ test('text', () => {
         'text-[xx-large]/6',
         'text-[larger]',
         'text-[larger]/6',
-        'text-[length:var(--my-size)]',
-        'text-[percentage:var(--my-size)]',
-        'text-[absolute-size:var(--my-size)]',
-        'text-[relative-size:var(--my-size)]',
+        'text-[length:--my-size]',
+        'text-[percentage:--my-size]',
+        'text-[absolute-size:--my-size]',
+        'text-[relative-size:--my-size]',
         'text-[clamp(1rem,2rem,3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]/9',
@@ -11306,7 +11303,7 @@ test('text', () => {
       font-size: 50%;
     }
 
-    .text-\\[absolute-size\\:var\\(--my-size\\)\\] {
+    .text-\\[absolute-size\\:--my-size\\] {
       font-size: var(--my-size);
     }
 
@@ -11322,7 +11319,7 @@ test('text', () => {
       font-size: larger;
     }
 
-    .text-\\[length\\:var\\(--my-size\\)\\], .text-\\[percentage\\:var\\(--my-size\\)\\], .text-\\[relative-size\\:var\\(--my-size\\)\\] {
+    .text-\\[length\\:--my-size\\], .text-\\[percentage\\:--my-size\\], .text-\\[relative-size\\:--my-size\\] {
       font-size: var(--my-size);
     }
 
@@ -11338,19 +11335,19 @@ test('text', () => {
       color: #0088cc80;
     }
 
-    .text-\\[color\\:var\\(--my-color\\)\\] {
+    .text-\\[--my-color\\] {
       color: var(--my-color);
     }
 
-    .text-\\[color\\:var\\(--my-color\\)\\]\\/50, .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .text-\\[--my-color\\]\\/50, .text-\\[--my-color\\]\\/\\[0\\.5\\], .text-\\[--my-color\\]\\/\\[50\\%\\] {
       color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .text-\\[var\\(--my-color\\)\\] {
+    .text-\\[color\\:--my-color\\] {
       color: var(--my-color);
     }
 
-    .text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .text-\\[color\\:--my-color\\]\\/50, .text-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .text-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
@@ -11423,8 +11420,8 @@ test('shadow', () => {
         'shadow-none',
         'shadow-[12px_12px_#0088cc]',
         'shadow-[10px_10px]',
-        'shadow-[var(--value)]',
-        'shadow-[shadow:var(--value)]',
+        'shadow-[--value]',
+        'shadow-[shadow:--value]',
 
         // Colors
         'shadow-red-500',
@@ -11441,10 +11438,10 @@ test('shadow', () => {
         'shadow-[#0088cc]/50',
         'shadow-[#0088cc]/[0.5]',
         'shadow-[#0088cc]/[50%]',
-        'shadow-[color:var(--value)]',
-        'shadow-[color:var(--value)]/50',
-        'shadow-[color:var(--value)]/[0.5]',
-        'shadow-[color:var(--value)]/[50%]',
+        'shadow-[color:--value]',
+        'shadow-[color:--value]/50',
+        'shadow-[color:--value]/[0.5]',
+        'shadow-[color:--value]/[50%]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11460,6 +11457,12 @@ test('shadow', () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .shadow-\\[--value\\] {
+      --tw-shadow: var(--value);
+      --tw-shadow-colored: var(--value);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .shadow-\\[10px_10px\\] {
       --tw-shadow: 10px 10px;
       --tw-shadow-colored: 10px 10px;
@@ -11472,7 +11475,7 @@ test('shadow', () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .shadow-\\[shadow\\:var\\(--value\\)\\], .shadow-\\[var\\(--value\\)\\] {
+    .shadow-\\[shadow\\:--value\\] {
       --tw-shadow: var(--value);
       --tw-shadow-colored: var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -11500,12 +11503,12 @@ test('shadow', () => {
       --tw-shadow: var(--tw-shadow-colored);
     }
 
-    .shadow-\\[color\\:var\\(--value\\)\\] {
+    .shadow-\\[color\\:--value\\] {
       --tw-shadow-color: var(--value);
       --tw-shadow: var(--tw-shadow-colored);
     }
 
-    .shadow-\\[color\\:var\\(--value\\)\\]\\/50, .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+    .shadow-\\[color\\:--value\\]\\/50, .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\] {
       --tw-shadow-color: color-mix(in srgb, var(--value) 50%, transparent);
       --tw-shadow: var(--tw-shadow-colored);
     }
@@ -11627,7 +11630,7 @@ test('shadow', () => {
       '-shadow-[#0088cc]/50',
       '-shadow-[#0088cc]/[0.5]',
       '-shadow-[#0088cc]/[50%]',
-      '-shadow-[var(--value)]',
+      '-shadow-[--value]',
     ]),
   ).toEqual('')
 })
@@ -11650,8 +11653,8 @@ test('inset-shadow', () => {
         'inset-shadow-none',
         'inset-shadow-[12px_12px_#0088cc]',
         'inset-shadow-[10px_10px]',
-        'inset-shadow-[var(--value)]',
-        'inset-shadow-[shadow:var(--value)]',
+        'inset-shadow-[--value]',
+        'inset-shadow-[shadow:--value]',
 
         // Colors
         'inset-shadow-red-500',
@@ -11668,10 +11671,10 @@ test('inset-shadow', () => {
         'inset-shadow-[#0088cc]/50',
         'inset-shadow-[#0088cc]/[0.5]',
         'inset-shadow-[#0088cc]/[50%]',
-        'inset-shadow-[color:var(--value)]',
-        'inset-shadow-[color:var(--value)]/50',
-        'inset-shadow-[color:var(--value)]/[0.5]',
-        'inset-shadow-[color:var(--value)]/[50%]',
+        'inset-shadow-[color:--value]',
+        'inset-shadow-[color:--value]/50',
+        'inset-shadow-[color:--value]/[0.5]',
+        'inset-shadow-[color:--value]/[50%]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11687,6 +11690,12 @@ test('inset-shadow', () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    .inset-shadow-\\[--value\\] {
+      --tw-inset-shadow: inset var(--value);
+      --tw-inset-shadow-colored: inset var(--value);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .inset-shadow-\\[10px_10px\\] {
       --tw-inset-shadow: inset 10px 10px;
       --tw-inset-shadow-colored: inset 10px 10px;
@@ -11699,7 +11708,7 @@ test('inset-shadow', () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .inset-shadow-\\[shadow\\:var\\(--value\\)\\], .inset-shadow-\\[var\\(--value\\)\\] {
+    .inset-shadow-\\[shadow\\:--value\\] {
       --tw-inset-shadow: inset var(--value);
       --tw-inset-shadow-colored: inset var(--value);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -11727,12 +11736,12 @@ test('inset-shadow', () => {
       --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    .inset-shadow-\\[color\\:var\\(--value\\)\\] {
+    .inset-shadow-\\[color\\:--value\\] {
       --tw-inset-shadow-color: var(--value);
       --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
 
-    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+    .inset-shadow-\\[color\\:--value\\]\\/50, .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\] {
       --tw-inset-shadow-color: color-mix(in srgb, var(--value) 50%, transparent);
       --tw-inset-shadow: var(--tw-inset-shadow-colored);
     }
@@ -11854,7 +11863,7 @@ test('inset-shadow', () => {
       '-inset-shadow-[#0088cc]/50',
       '-inset-shadow-[#0088cc]/[0.5]',
       '-inset-shadow-[#0088cc]/[50%]',
-      '-inset-shadow-[var(--value)]',
+      '-inset-shadow-[--value]',
     ]),
   ).toEqual('')
 })
@@ -11885,14 +11894,14 @@ test('ring', () => {
         'ring-[#0088cc]/50',
         'ring-[#0088cc]/[0.5]',
         'ring-[#0088cc]/[50%]',
-        'ring-[var(--my-color)]',
-        'ring-[var(--my-color)]/50',
-        'ring-[var(--my-color)]/[0.5]',
-        'ring-[var(--my-color)]/[50%]',
-        'ring-[color:var(--my-color)]',
-        'ring-[color:var(--my-color)]/50',
-        'ring-[color:var(--my-color)]/[0.5]',
-        'ring-[color:var(--my-color)]/[50%]',
+        'ring-[--my-color]',
+        'ring-[--my-color]/50',
+        'ring-[--my-color]/[0.5]',
+        'ring-[--my-color]/[50%]',
+        'ring-[color:--my-color]',
+        'ring-[color:--my-color]/50',
+        'ring-[color:--my-color]/[0.5]',
+        'ring-[color:--my-color]/[50%]',
 
         // ring width
         'ring',
@@ -11901,7 +11910,7 @@ test('ring', () => {
         'ring-2',
         'ring-4',
         'ring-[12px]',
-        'ring-[length:var(--my-width)]',
+        'ring-[length:--my-width]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -11939,7 +11948,7 @@ test('ring', () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .ring-\\[length\\:var\\(--my-width\\)\\] {
+    .ring-\\[length\\:--my-width\\] {
       --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width)  + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
@@ -11952,19 +11961,19 @@ test('ring', () => {
       --tw-ring-color: #0088cc80;
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\] {
+    .ring-\\[--my-color\\] {
       --tw-ring-color: var(--my-color);
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .ring-\\[--my-color\\]\\/50, .ring-\\[--my-color\\]\\/\\[0\\.5\\], .ring-\\[--my-color\\]\\/\\[50\\%\\] {
       --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .ring-\\[var\\(--my-color\\)\\] {
+    .ring-\\[color\\:--my-color\\] {
       --tw-ring-color: var(--my-color);
     }
 
-    .ring-\\[var\\(--my-color\\)\\]\\/50, .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .ring-\\[color\\:--my-color\\]\\/50, .ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       --tw-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
@@ -12119,14 +12128,14 @@ test('inset-ring', () => {
         'inset-ring-[#0088cc]/50',
         'inset-ring-[#0088cc]/[0.5]',
         'inset-ring-[#0088cc]/[50%]',
-        'inset-ring-[var(--my-color)]',
-        'inset-ring-[var(--my-color)]/50',
-        'inset-ring-[var(--my-color)]/[0.5]',
-        'inset-ring-[var(--my-color)]/[50%]',
-        'inset-ring-[color:var(--my-color)]',
-        'inset-ring-[color:var(--my-color)]/50',
-        'inset-ring-[color:var(--my-color)]/[0.5]',
-        'inset-ring-[color:var(--my-color)]/[50%]',
+        'inset-ring-[--my-color]',
+        'inset-ring-[--my-color]/50',
+        'inset-ring-[--my-color]/[0.5]',
+        'inset-ring-[--my-color]/[50%]',
+        'inset-ring-[color:--my-color]',
+        'inset-ring-[color:--my-color]/50',
+        'inset-ring-[color:--my-color]/[0.5]',
+        'inset-ring-[color:--my-color]/[50%]',
 
         // ring width
         'inset-ring',
@@ -12135,7 +12144,7 @@ test('inset-ring', () => {
         'inset-ring-2',
         'inset-ring-4',
         'inset-ring-[12px]',
-        'inset-ring-[length:var(--my-width)]',
+        'inset-ring-[length:--my-width]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -12173,7 +12182,7 @@ test('inset-ring', () => {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
-    .inset-ring-\\[length\\:var\\(--my-width\\)\\] {
+    .inset-ring-\\[length\\:--my-width\\] {
       --tw-inset-ring-shadow: inset 0 0 0 var(--my-width) var(--tw-inset-ring-color, currentColor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
@@ -12186,19 +12195,19 @@ test('inset-ring', () => {
       --tw-inset-ring-color: #0088cc80;
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\] {
+    .inset-ring-\\[--my-color\\] {
       --tw-inset-ring-color: var(--my-color);
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .inset-ring-\\[--my-color\\]\\/50, .inset-ring-\\[--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[--my-color\\]\\/\\[50\\%\\] {
       --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .inset-ring-\\[var\\(--my-color\\)\\] {
+    .inset-ring-\\[color\\:--my-color\\] {
       --tw-inset-ring-color: var(--my-color);
     }
 
-    .inset-ring-\\[var\\(--my-color\\)\\]\\/50, .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .inset-ring-\\[color\\:--my-color\\]\\/50, .inset-ring-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       --tw-inset-ring-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
@@ -12350,14 +12359,14 @@ test('ring-offset', () => {
         'ring-offset-[#0088cc]/[0.5]',
         'ring-offset-[#0088cc]/[50%]',
 
-        'ring-offset-[var(--my-color)]',
-        'ring-offset-[var(--my-color)]/50',
-        'ring-offset-[var(--my-color)]/[0.5]',
-        'ring-offset-[var(--my-color)]/[50%]',
-        'ring-offset-[color:var(--my-color)]',
-        'ring-offset-[color:var(--my-color)]/50',
-        'ring-offset-[color:var(--my-color)]/[0.5]',
-        'ring-offset-[color:var(--my-color)]/[50%]',
+        'ring-offset-[--my-color]',
+        'ring-offset-[--my-color]/50',
+        'ring-offset-[--my-color]/[0.5]',
+        'ring-offset-[--my-color]/[50%]',
+        'ring-offset-[color:--my-color]',
+        'ring-offset-[color:--my-color]/50',
+        'ring-offset-[color:--my-color]/[0.5]',
+        'ring-offset-[color:--my-color]/[50%]',
 
         // ring width
         'ring-offset-0',
@@ -12365,7 +12374,7 @@ test('ring-offset', () => {
         'ring-offset-2',
         'ring-offset-4',
         'ring-offset-[12px]',
-        'ring-offset-[length:var(--my-width)]',
+        'ring-offset-[length:--my-width]',
       ],
     ),
   ).toMatchInlineSnapshot(`
@@ -12398,7 +12407,7 @@ test('ring-offset', () => {
       --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
 
-    .ring-offset-\\[length\\:var\\(--my-width\\)\\] {
+    .ring-offset-\\[length\\:--my-width\\] {
       --tw-ring-offset-width: var(--my-width);
       --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
@@ -12411,19 +12420,19 @@ test('ring-offset', () => {
       --tw-ring-offset-color: #0088cc80;
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\] {
+    .ring-offset-\\[--my-color\\] {
       --tw-ring-offset-color: var(--my-color);
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .ring-offset-\\[--my-color\\]\\/50, .ring-offset-\\[--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[--my-color\\]\\/\\[50\\%\\] {
       --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }
 
-    .ring-offset-\\[var\\(--my-color\\)\\] {
+    .ring-offset-\\[color\\:--my-color\\] {
       --tw-ring-offset-color: var(--my-color);
     }
 
-    .ring-offset-\\[var\\(--my-color\\)\\]\\/50, .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+    .ring-offset-\\[color\\:--my-color\\]\\/50, .ring-offset-\\[color\\:--my-color\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:--my-color\\]\\/\\[50\\%\\] {
       --tw-ring-offset-color: color-mix(in srgb, var(--my-color) 50%, transparent);
     }