Ring class does not in Chrome 111/118+ because of extra comma

[minht11]

What version of Tailwind CSS are you using?
v4.1.13

What build tool (or framework if it abstracts the build tool) are you using?

Vite/playground

What browser are you using?

Chrome

What operating system are you using?

macOS, Windows

Reproduction URL

https://play.tailwindcss.com/N8s1B7cVYF

Describe your issue
When generating ring class name tailwind adds:

var(--tw-ring-inset,) 0 0 0 calc(40px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor)

see extra comma after --tw-ring-inset, because of that it does not seem to work in older browser which are in supported by Tailwind like Chrome 111/118 I tested on latest Chrome 139 and it does work.

Fix seems to be remove extra comma.

Screen.Recording.2025-09-12.at.13.13.27.mov

[philipp-spiess]

Hey! The fallback is actually on purpose here, the whole declaration is otherwise being thrown out if the var is not defined otherwise.

It does need to be var(--tw-ring-inset, ) (with a space!) though. Looking into it!

[philipp-spiess]

Alright so I was being told that the space thing was something that has changed in the past. Going to make a PR to make sure we do include the space here! Thanks for the report.

[minht11]

I patched it for myself quick replace ,) -> , ), but another issue seems missing space between variable and shadow numbers, which prevents it working.

[philipp-spiess]

Yeah was running into that right now too. This space is removed by lightningcss:

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22.foo%20%7B%5Cn%20%20background%3A%20var(--red%2C%20)%200px%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

Hmmm, not really sure what to best do here now. That's also something where now the spec is clear that after a var(…) there'll always be a space inserted but that hasn't always been implemented that way IIRC.

[minht11]

That spec change is relatively recent, if I am not mistaken Chrome shipped it this year, so lightingcss should not remove spaces there especially when target is bit older browsers.

[thecrypticace]

Jotting this down for reference:

The spec change happened in June 2021: w3c/csswg-drafts#6345 (comment)

Assuming I'm reading it right It was shipped in May 2023 in Chrome 113: chromium/chromium@00733ff

(the commit is from early March but Chrome 113 was promoted to stable in May)

[minht11]

I might have confused whitespace trimming with Browsers allowing invalid fallback to work which did ship this year. Though lightingcss still should not remove those spaces when browser target is less than Chrome 113, changing target in playground does not change output.

Regarding empty space inside fallback adding it does not fix the original issue, I just tested it again Chrome 118 and var(--tw-ring-inset, ) still fails even with space present, but var(--tw-ring-inset) does work.

[philipp-spiess]

@minht11 You are right in that Chrome 113 does seem to STILL have an issue.

To summarize: There are two separate issues here.

1. We do not include the space in the var fallback (var(--tw-ring-inset,) instead of var(--tw-ring-inset, )). This is on us and we should fix.
2. However, the issue is that lightningcss does remove spaces after the var function (--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 … turns into --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 …`).

In order for this to work, both issues will need to be fixed with the latter one currently not being configurable by lightningcss.

When both are fixed, it does work in Chrome 111:

However it still does NOT work in Chrome 113:

You are right in that var(--tw-ring-inset) does work but once you remove the ring-inset class (and make it a normal non-inset ring) it WON'T because the whole declaration is thrown out when one variable is not found:

That's the reason why we can't simply do that I'm afraid :(