search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
82.72k stars 4.19k forks source link

Border opacity not working when color isn't specified #14240

Open quick007 opened 2 months ago

quick007 commented 2 months ago

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 commented 2 months ago

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

quick007 commented 2 months ago

@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 commented 1 month ago

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 commented 1 month ago

Yep!