You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
After upgrading to v3, I'm able to reproduce this issue. Adding border-opacity- classes has no effect on an element when it is using the default border color. The opacity still works with other border colors.
For example, there is a visible border here when I would expect it to be transparent.
Personally though I would recommend specifying the color and using the opacity modifier in your HTML instead:
<divclass="border border-gray-200/50"></div>
For your specific example I would use border border-transparent but I'm guessing the above is more representative of your actual usage.
We've learned from working on the framework over the years that CSS variable reads (using var(...)) are very expensive when you use them on the * selector and can cause performance issues on large sites, especially in Safari.
Sorry about the change in behavior here! 😔 Hope those suggestions help. It looks like I missed this when I wrote the upgrade guide, so I've updated that as well to mention this change.
What version of Tailwind CSS are you using?
v3.0.24
What build tool (or framework if it abstracts the build tool) are you using?
[email protected]
What version of Node.js are you using?
v16.15.0
What browser are you using?
Firefox
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/vpfsyNGMHS
Describe your issue
After upgrading to v3, I'm able to reproduce this issue. Adding
border-opacity-
classes has no effect on an element when it is using the default border color. The opacity still works with other border colors.For example, there is a visible border here when I would expect it to be transparent.
The text was updated successfully, but these errors were encountered: