Safelist not working for background colors opacity

[miguilimzero]

What version of Tailwind CSS are you using?

v3.0.7

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

Laravel Mix v6.0.6

What version of Node.js are you using?

v16.13.1

What browser are you using?

Chrome

What operating system are you using?

Manjaro Gnome

Reproduction URL

https://github.com/srdante/tailwindcss/blob/master/tests/safelist.test.js

Describe your issue

1. The lack of warning about bg-opacity-* changes.
2. The safelist not working for the new opacity classes format.

While upgrading to Tailwind CSS 3, I noticed the bg-opacity-* classes despite being generated correctly in the css file, they are not mentioned anywhere on the upgrade guide page (https://tailwindcss.com/docs/upgrade-guide) and they are completely gone from the v3 documentation (v2: https://v2.tailwindcss.com/docs/background-opacity).

After searching on the v3 documentation, it is possible to come to the conclusion that the color classes are now used with {class}/{opacity} style to control opacity (example: bg-sky-500/50). However, in my project the color classes for some components are dynamically generated, and for that they need to be in the safelist.

The problem starts when neither type of pattern works for the safelist of that type of class. Even using third party tools confirming that the regex is correct, it's not working for Tailwind CSS compiling engine. Here is an online regex testing showing that the expression is correct and working: https://regex101.com/r/WDFZJ7/1

[adamwathan]

Sorry I’m not understanding the issue — the bg-opacity-* all still exist and work for backwards compatibility, we just removed them from the documentation because we want to encourage the color opacity modifier instead.

Can you share a reproduction that shows that they can’t be safe listed? There’s no reason I can think of that that shouldn’t work and I can’t reproduce it myself.