-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Border opacity does not apply to the default border color #8430
Comments
Hey! Yeah this was something we were forced to change for v3 to fix another complex issue: You can bring back this behavior in your own project by adding this rule to your @tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
} Personally though I would recommend specifying the color and using the opacity modifier in your HTML instead: <div class="border border-gray-200/50"></div> For your specific example I would use We've learned from working on the framework over the years that CSS variable reads (using 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. |
Ok, thanks for the quick feedback and explanation! I can manage with the workarounds. :) |
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?
webpack@5.72.1
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: