Color / font size values are not recognized in some cases or are not recognized correctly

[Serator]

What version of Tailwind CSS are you using?

v3.3.1

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

play.tailwindcss.com

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/GFT8QOeZfA

Describe your issue

The example at the link has several dozen tests, of which the red ones seem to me to work incorrectly, and the green ones to work correctly. This is far from complete coverage, but only reflects the cases I have encountered.

[YosefBlandin]

After taking a look at your code, I noticed that you're trying to mix two different properties, these properties are the following:
text-[--color]/[--opacity]

You can't mix these properties because that is incorrect, if you want to change the opacity of the element you need to do the following:
[--opacity:_100%] text-[--color] opacity-[--opacity]

But if the outcome that you want is just to play with the opacity of the font you can do the following as well:
[--color:rgba(200,200,200,9)] [--opacity:_100%] text-[--color]

In this way you use a rgba function that enables you to modify the opacity of the color and achieve the outcome that you want.

Please let me know if this solution makes sense to you.

[quick007]

After taking a look at your code, I noticed that you're trying to mix two different properties, these properties are the following: text-[--color]/[--opacity]

You can't mix these properties because that is incorrect, if you want to change the opacity of the element you need to do the following: [--opacity:_100%] text-[--color] opacity-[--opacity]

But if the outcome that you want is just to play with the opacity of the font you can do the following as well: [--color:rgba(200,200,200,9)] [--opacity:_100%] text-[--color]

In this way you use a rgba function that enables you to modify the opacity of the color and achieve the outcome that you want.

Please let me know if this solution makes sense to you.

omg there are so many AI bots here. anyways,

This is false. Firstly, that is (theoretically) the correct tailwind syntax. Secondly, the outcome he's trying to achieve is to change the opacity of the text, which can be done in tailwind with the format text-black/(opacity here). You can also use text-opacity-(value), but opacity itself has a different effect.

[YosefBlandin]

Okay I figured out another way to do it, but thank you @quick007, I haven't noticed that syntax way of changing the opacity in the tailwind documentation, my apologies for that. I'm noticing that the syntax text-[--color]/[--opacity] works if the value of the --color variable is being wrote directly like this text-[#fff]/[--opacity].

[YosefBlandin]

Definitely it's an issue

[adarshSrivastava01]

#12081

[quick007]

guessing this is related to #12362

[Erij-Maherzia-BEN-BRAHIM]

any news about this issue?