tailwindcss
tailwindcss copied to clipboard
tailwindlabs
Color / font size values are not recognized in some cases or are not recognized correctly
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.
Please refer to the relevant documentation or sources for the most accurate and up-to-date information. PaybyPlateMa Invoice
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
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.
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.
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].
