From 056364960635366602d500251158da72e9a32db1 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 22 Nov 2022 10:17:51 -0500
Subject: [PATCH] Document arbitrary variable shorthand

---
 src/pages/docs/adding-custom-styles.mdx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/docs/adding-custom-styles.mdx b/src/pages/docs/adding-custom-styles.mdx
index eb4b4e5fa..37086026b 100644
--- a/src/pages/docs/adding-custom-styles.mdx
+++ b/src/pages/docs/adding-custom-styles.mdx
@@ -91,6 +91,14 @@ It's even possible to use the [`theme` function](/docs/functions-and-directives#
 </div>
 ```
 
+When using a CSS variable as an arbitrary value, wrapping your variable in `var(...)` isn't needed — just providing the actual variable name is enough:
+
+```html
+<div class="bg-[--my-color]">
+  <!-- ... -->
+</div>
+```
+
 ### Arbitrary properties
 
 If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS: