tailwindcss
tailwindcss copied to clipboard
Ring class does not in Chrome 111/118+ because of extra comma
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