From 64430333ba816a3c1222dac6de3041d186d34603 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Sat, 19 Nov 2022 11:16:24 -0500
Subject: [PATCH 1/3] Support using variables as arbitrary values without var()

---
 src/util/dataTypes.js          |  4 ++++
 tests/arbitrary-values.test.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index beb4cec89499..1d888e211ba3 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -13,6 +13,10 @@ function isCSSFunction(value) {
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, isRoot = true) {
+  if (value.startsWith('--')) {
+    return `var(${value})`
+  }
+
   // Keep raw strings if it starts with `url(`
   if (value.includes('url(')) {
     return value
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index da17a6cdf1aa..e96a0f7aa3bb 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -537,3 +537,31 @@ it('can explicitly specify type for percentage and length', () => {
     `)
   })
 })
+
+it('can use CSS variables as arbitrary values without `var()`', () => {
+  let config = {
+    content: [
+      { raw: html`<div class="w-[--width-var] bg-[--color-var] text-[length:--size-var]"></div>` },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .w-\[--width-var\] {
+        width: var(--width-var);
+      }
+      .bg-\[--color-var\] {
+        background-color: var(--color-var);
+      }
+      .text-\[length\:--size-var\] {
+        font-size: var(--size-var);
+      }
+    `)
+  })
+})

From b16893b6182c54e7777c1ec2b84cc1b2d6db6a60 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Sat, 19 Nov 2022 11:20:36 -0500
Subject: [PATCH 2/3] Update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fdc889403bc..6f20d7340ef3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support using variables as arbitrary values without `var(...)` ([#9880](https://github.com/tailwindlabs/tailwindcss/pull/9880))
+
 ### Fixed
 
 - Cleanup unused `variantOrder` ([#9829](https://github.com/tailwindlabs/tailwindcss/pull/9829))

From 406367cf9d5a05288f7a688f7e40d70a3f61deac Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Sat, 19 Nov 2022 14:43:18 -0500
Subject: [PATCH 3/3] Add tests for variable fallback values

---
 tests/arbitrary-values.test.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index e96a0f7aa3bb..ec3b9494161e 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -541,7 +541,11 @@ it('can explicitly specify type for percentage and length', () => {
 it('can use CSS variables as arbitrary values without `var()`', () => {
   let config = {
     content: [
-      { raw: html`<div class="w-[--width-var] bg-[--color-var] text-[length:--size-var]"></div>` },
+      {
+        raw: html`<div
+          class="w-[--width-var] bg-[--color-var] bg-[--color-var,#000] bg-[length:--size-var] text-[length:--size-var,12px]"
+        ></div>`,
+      },
     ],
     corePlugins: { preflight: false },
     plugins: [],
@@ -559,8 +563,14 @@ it('can use CSS variables as arbitrary values without `var()`', () => {
       .bg-\[--color-var\] {
         background-color: var(--color-var);
       }
-      .text-\[length\:--size-var\] {
-        font-size: var(--size-var);
+      .bg-\[--color-var\2c \#000\] {
+        background-color: var(--color-var, #000);
+      }
+      .bg-\[length\:--size-var\] {
+        background-size: var(--size-var);
+      }
+      .text-\[length\:--size-var\2c 12px\] {
+        font-size: var(--size-var, 12px);
       }
     `)
   })