Border opacity not working when color isn't specified

[quick007]

What version of Tailwind CSS are you using?

3.4.7

What build tool (or framework if it abstracts the build tool) are you using?

"next": "14.2.5", "postcss": "^8.4.40",

What version of Node.js are you using?

v22.0.0

What browser are you using?

Chome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/2kFJgAhjXC

Describe your issue

You need to add a border color for border-opacity-<number> to work. Just border border-opacity-<number> should work on it's own.

[gaojunran]

I have met the same problem with you. And I think it might be designed deliberately by TailwindCSS team.

[quick007]

@gaojunran are you triggering a border on hover/focus but don't want CLS like I am (and why I filed this issue). Instead, you can do border-transparent and border-inherit, i.e. border border-transparent hover:border-inherit

[usernamedd]

if you define border-red-100 and border-opacity- , the will be used as opacity of rgba color(here is red) . but if the border-- is not defined , the opcity will not be applied , as a result the border not behave as expected

[quick007]

Yep!

[philipp-spiess]

Hey! Thanks for the bug report and sorry for the late reply but now that Tailwind CSS 4 is out and the border-opacity-* utilities being removed (you have to set a color now to apply an opacity), that's not something that's going to be confusing anymore I think. I don't think we'll be backporting potential breaking changes like this to v3 anymore though (since this can break existing styling). Going to close this issue as a wontfix, sorry!