ring ignores opacity on dark color scheme

[ghostebony]

What version of Tailwind CSS are you using?

v3.3.3

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

sveltekit

What version of Node.js are you using?

v20.3.0

What browser are you using?

Firefox, Edge

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/PwsDG36K97

Describe your issue

I don't know if this intended or is a bug; but when using ring with ring-opacity on a dark color scheme, the dark variant ignores the ring-opacity, but works if dark:ring-opacity is present

[thecrypticace]

Hey! This is intentional — the ring-{color} utilities reset the opacity to 1 so they don't get inherited. When you do dark:ring-white the media query gets applied later resetting the opacity requiring you to also specify a dark version of the opacity explicitly.

As an aside, if you want, you can use our opacity modifier syntax instead of the ring-opacity-* utilities to bake in the color and opacity in one go. For example, ring-black/5 and dark:ring-white/5 instead of ring-black ring-opacity-5 and dark:ring-white dark:ring-opacity-5

[reinink]

Hey, just to add what @thecrypticace said, you can read more about the opacity modifiers in our Tailwind v3.0 upgrade guide here: https://tailwindcss.com/docs/upgrade-guide#new-opacity-modifier-syntax

There's a pretty good chance that we actually disable utilities like ring-opacity-* and bg-opacity-* by default in v4 – although you'll still be able to enable them if needed 👍