From aead9861af3673607a744fc35f1e08c17edcc59d Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Mon, 3 Feb 2025 13:53:01 +0100
Subject: [PATCH] Add change log

---
 CHANGELOG.md                   | 4 +++-
 playgrounds/vite/src/app.tsx   | 2 +-
 playgrounds/vite/src/index.css | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7501b1399f2a..b756b6cf9e31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure CSS variables in arbitrary values are properly decoded ([#16206](https://github.com/tailwindlabs/tailwindcss/pull/16206))
 
 ## [4.0.3] - 2025-02-01
 
diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx
index 4abc17cb52e1..5b3397d2b10c 100644
--- a/playgrounds/vite/src/app.tsx
+++ b/playgrounds/vite/src/app.tsx
@@ -2,7 +2,7 @@ export function App() {
   return (
     <div className="m-3 p-3 border">
       <h1 className="text-blue-500">Hello World</h1>
-      <div className="-inset-x-full -inset-y-full -space-x-full -space-y-full -inset-full"></div>
+      <div className="h-[var(--\_root-size)] text-[calc(0.2*var(--\_root-size))] [--Chip-decoratorChildHeight:calc(var(--\_Chip-minHeight)-0.25rem-2*var(--variant-borderWidth))] [--LinearProgress-progressRadius:max(var(--LinearProgress-radius)-var(--\_LinearProgress-padding),min(var(--\_LinearProgress-padding)/2,var(--LinearProgress-radius)/2))]"></div>
     </div>
   )
 }
diff --git a/playgrounds/vite/src/index.css b/playgrounds/vite/src/index.css
index d4b5078586e2..6e3435008ee6 100644
--- a/playgrounds/vite/src/index.css
+++ b/playgrounds/vite/src/index.css
@@ -1 +1,2 @@
-@import 'tailwindcss';
+@reference 'tailwindcss/theme.css';
+@import 'tailwindcss/utilities.css';