transparent displaying as black (0, 0, 0)
#77
Comments
troymcginnis
changed the title
transparent displaying as black (0, 0, 0,)transparent displaying as black (0, 0, 0)
|
This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks. |
|
Bump |
|
Thanks for opening this! I'll be sure to take a look at it soon |
Thanks! |
|
This is similar to #74 in that users of tailwindcss-themer want to use colors with alpha values. I do think good use cases are presented, but tailwind wants to manage opacity itself. In the interest of supporting the community use cases I'll consolidate this into #95 where this can be further discussed. I'd love to get your thoughts @troymcginnis :) I'll close this for now as this is expected behavior. |
resolves #95 fixes #74 fixes #77 BREAKING CHANGE: Alpha channels in colors are no longer stripped. If you want the alpha channels stripped still, either do so manually or change the classes you are using to use the [opacity modifier syntax](https://tailwindcss.com/docs/upgrade-guide#new-opacity-modifier-syntax) with the opacity set to `100` e.g. from `bg-primary` to `bg-primary/100`.
resolves #95 fixes #74 fixes #77 BREAKING CHANGE: Alpha channels in colors are no longer stripped. If you want the alpha channels stripped still, either do so manually or change the classes you are using to use the [opacity modifier syntax](https://tailwindcss.com/docs/upgrade-guide#new-opacity-modifier-syntax) with the opacity set to `100` e.g. from `bg-primary` to `bg-primary/100`.
|
🎉 This issue has been resolved in version 4.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
I just released this feature in v4. @troymcginnis let me know if this addresses your issue. |
|
@RyanClementsHax Upgraded and looks to be working as expected! Thanks so much for implementing the change 🙏🏼 |
|
No problem! Happy to help. |
Describe the bug
When setting a color token with a value of
transparent, the CSS variable is set to0, 0, 0with a default of--tw-bg-opacity: 1. This causes the output color to be black.My assumption is that this has something to do with the way that Themer removes alpha channels from colors to support the opacity modifier syntax, though I'm not sure how to overcome this without using an arbitrary value such as
bg-[transparent]. This may work in some cases but my preference would be to stick with the default TW setup ofbg-transparent.Your minimal, reproducible example
https://codesandbox.io/p/sandbox/magical-swartz-t09moi?file=%2Fpackage.json%3A16%2C29-17%2C35
Steps to reproduce
hover:bg-[transparent]Expected behavior
The expected behaviour is that the top two buttons will have transparent backgrounds since using the
transparentcolor keyword.How often does this bug happen?
Every time
Screenshots or Videos
Platform
tailwindcss-themer version
v3.1.0
Additional context
No response
The text was updated successfully, but these errors were encountered: