From 4f92f7a8e3bdc8db8491e75a9c1db2ef585859db Mon Sep 17 00:00:00 2001
From: Niels Kaspers <kaspersniels@gmail.com>
Date: Mon, 20 Apr 2026 09:11:39 +0300
Subject: [PATCH] docs(responsive-design): note CSS variables aren't supported
 in arbitrary breakpoint values (#2453)

---
 src/docs/responsive-design.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/docs/responsive-design.mdx b/src/docs/responsive-design.mdx
index 4adb3b9a2..9f2ed29fd 100644
--- a/src/docs/responsive-design.mdx
+++ b/src/docs/responsive-design.mdx
@@ -375,6 +375,8 @@ If you need to use a one-off breakpoint that doesn’t make sense to include in
 
 Learn more about arbitrary value support in the [arbitrary values](/docs/adding-custom-styles#using-arbitrary-values) documentation.
 
+Note that CSS variables aren't supported as arbitrary breakpoint values because CSS `@media` queries don't support the `var()` function.
+
 ## Container queries
 
 ### What are container queries?