From 78b4864d304f4d822fabe3fadb465f5bd4169f4e Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 Jul 2026 13:29:28 +0200
Subject: [PATCH] always emit `, )` instead of `,)` for fallback values in CSS
 variables

This will bring the development version and production version closer
together. It also means that the development version works in older
supported browsers like  Chrome v112 where the space is required (even
though the spec allows both)

There are no changes in tests just becaues we already run each test
through Lightning CSS which normalizes these values:

Input:
```css
var(--tw-blur,)
var(--tw-blur, )
```

Lightning CSS output:
```css
var(--tw-blur, )
var(--tw-blur, )
```
---
 packages/tailwindcss/src/utilities.ts | 60 +++++++++++++--------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 5da9e63e1..54b472c60 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -1561,11 +1561,11 @@ export function createUtilities(theme: Theme) {
 
   {
     let transformValue = [
-      'var(--tw-rotate-x,)',
-      'var(--tw-rotate-y,)',
-      'var(--tw-rotate-z,)',
-      'var(--tw-skew-x,)',
-      'var(--tw-skew-y,)',
+      'var(--tw-rotate-x, )',
+      'var(--tw-rotate-y, )',
+      'var(--tw-rotate-z, )',
+      'var(--tw-skew-x, )',
+      'var(--tw-skew-y, )',
     ].join(' ')
 
     let transformProperties = () =>
@@ -1807,7 +1807,7 @@ export function createUtilities(theme: Theme) {
     staticUtility(`touch-pan-${value}`, [
       touchProperties,
       ['--tw-pan-x', `pan-${value}`],
-      ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
+      ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
     ])
   }
 
@@ -1815,14 +1815,14 @@ export function createUtilities(theme: Theme) {
     staticUtility(`touch-pan-${value}`, [
       touchProperties,
       ['--tw-pan-y', `pan-${value}`],
-      ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
+      ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
     ])
   }
 
   staticUtility('touch-pinch-zoom', [
     touchProperties,
     ['--tw-pinch-zoom', `pinch-zoom`],
-    ['touch-action', 'var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)'],
+    ['touch-action', 'var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )'],
   ])
 
   /**
@@ -4178,27 +4178,27 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssFilterValue = [
-      '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,)',
+      '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, )',
     ].join(' ')
 
     let cssBackdropFilterValue = [
-      '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,)',
+      '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, )',
     ].join(' ')
 
     let filterProperties = () => {
@@ -4941,7 +4941,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssContainValue =
-      'var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)'
+      'var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, )'
     let cssContainProperties = () => {
       return atRoot([
         property('--tw-contain-size'),
@@ -5035,7 +5035,7 @@ export function createUtilities(theme: Theme) {
 
   {
     let cssFontVariantNumericValue =
-      'var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)'
+      'var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )'
     let fontVariantNumericProperties = () => {
       return atRoot([
         property('--tw-ordinal'),
@@ -5819,7 +5819,7 @@ export function createUtilities(theme: Theme) {
 
     let defaultRingColor = theme.get(['--default-ring-color']) ?? 'currentcolor'
     function ringShadowValue(value: string) {
-      return `var(--tw-ring-inset,) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`
+      return `var(--tw-ring-inset, ) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color, ${defaultRingColor})`
     }
     utilities.functional('ring', (candidate) => {
       if (!candidate.value) {
@@ -5968,7 +5968,7 @@ export function createUtilities(theme: Theme) {
     ])
 
     let ringOffsetShadowValue =
-      'var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)'
+      'var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)'
     utilities.functional('ring-offset', (candidate) => {
       if (!candidate.value) return