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?

[adamwathan]

Hey! Now that Tailwind CSS v4.0 is out we don't plan to actively develop v3 outside of crucial bug fixes or compatibility issues with other tools, so going to close this one. If you notice this still being a problem in v4.0, please feel free to open a new issue and we can investigate 👍

[quick007]

@adamwathan I just updated the repro url to 4.0 and it still seems to be an issue. Maybe we can reopen this one to preserve discussion and edit the of issue with a new URL?

[wongjn]

In v4, <name>-[--variable] is now <name>-(--variable) and /[--variable] is now /(--variable).

With these changes made in https://play.tailwindcss.com/Lvx2ogHkhg, there only seems to be two issues:

• text-[lch(0%_0_0)]/(--opacity) [--opacity:_0.5]
  

  The CSS variable is passed through to color-mix(). I don't think Tailwind can "know" whether --opacity is in the correct format, since it can be changed at runtime.

• text-[math]
  

  I believe this could be seen as a legitimate issue that this should be inferred as font-size, not color, though according to MDN, Safari does not support this property. Perhaps this is why the math keyword has not be included in the type inference.