tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

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

Open minht11 opened this issue 3 months ago • 8 comments

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.

https://github.com/user-attachments/assets/dd326f51-c129-4ba7-8b62-3006fd0bd1c7

minht11 avatar Sep 12 '25 10:09 minht11