Closed maxsalven closed 1 year ago
Hey! Thank you for your bug report! Much appreciated! 🙏
This should be fixed by #132, and will be available in the next release.
You can already try it by using the insiders build npm install @tailwindcss/forms@insiders
.
I'm still having an issue despite the fix with the chevron from the form-select class. When the color is defined as a static hex value everything is fine, but when using variables I get a SVG like this as a result:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 22'%3e%3cpath stroke='rgb(var(--gray-500) / var(--tw-stroke-opacity%2c 1))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")
The chevron with this SVG will not show up at least for me in the newest version of Chrome in Linux.
I'm still having an issue despite the fix with the chevron from the form-select class. When the color is defined as a static hex value everything is fine, but when using variables I get a SVG like this as a result:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 22'%3e%3cpath stroke='rgb(var(--gray-500) / var(--tw-stroke-opacity%2c 1))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")
The chevron with this SVG will not show up at least for me in the newest version of Chrome in Linux.
I've got the exact same issue with the latest package version. Any workaround/fix available, @RobinMalfait?
What version of @tailwindcss/forms are you using?
0.5.3
What version of Node.js are you using?
16
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction repository
https://play.tailwindcss.com/zD1WjAfQbs
Describe your issue
If you use a CSS variable for color-gray-500 with the modern alpha value friendly syntax, then the generated placeholder color still contains the '\' string, and will render as black: