Border opacity does not apply to the default border color

[cjpearson]

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.

<div class="flex flex-col min-h-screen bg-gray-50">
  <div class="m-auto h-20 w-20 border border-opacity-0 bg-white"></div>
</div>

[adamwathan]

Hey! Yeah this was something we were forced to change for v3 to fix another complex issue:

#6926

You can bring back this behavior in your own project by adding this rule to your base layer:

@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 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.

[cjpearson]

Ok, thanks for the quick feedback and explanation! I can manage with the workarounds. :)