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.

[kkianning1]

Please refer to the relevant documentation or sources for the most accurate and up-to-date information. PaybyPlateMa Invoice

[joeypohie]

Potential related Issues / PRs:

• First letter selection color issue: This issue discusses a problem with the first letter selection color not working correctly in Tailwind CSS. It includes a reproduction URL and provides a visual example of the issue. It is relevant because it addresses a similar problem with color values not being applied correctly.
• Unexpected behavior of pseudo-elements such as marker: This issue discusses unexpected behavior of pseudo-elements such as marker in Tailwind CSS. It includes reproduction URLs and visual examples of the issue. It is relevant because it addresses a similar problem with unexpected behavior of CSS properties.

This message was generated by AI from www.triagetickets.com

[Haydenpayne]

Thanks for sharing.

[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?