HSL values with opacity break

[silveltman]

Describe the bug

I use this plugin with radix color palette (check #67).
All regular colors work fine, but all 'A' colors do not. Like, gray works, but grayA breaks.

I believe the difference between those 2 colors palettes is one uses different shades, the other (A) uses opacity.

I'm not 100% sure though, since radix's documentation doesn't explain this.

Your minimal, reproducible example

https://play.tailwindcss.com/LeVSicAa9O?file=config

Steps to reproduce

open tailwindplay

Expected behavior

Expect it to work with opacity

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

mac, brave

tailwindcss-themer version

3.0.2

Additional context

No response

[RyanClementsHax]

Hiya! Thanks for opening this. Also thanks for making the reproduction repo. I'm looking into this now.

[RyanClementsHax]

Ah, I see what's going on. The alpha value is stripped. This is intentional. These docs explain more, but the TLDR is that manually specifying alpha runs into problems when you also want to use tailwind's opacity classes.

If I'm being honest, when implementing this feature, I didn't think many people worked with color palettes that baked opacity into them.

Alas, if I could wave a magic wand, I'd probably make it so that the default opacity is configurable as this is a situation I think would be reasonable to support, but the api to configure this on a per value basis isn't available in tailwind from what I know. Tailwind wants to manage opacity itself.

That being said I'm open to discussion if you want to consider this point further. For now, I'll close this issue.

[RyanClementsHax]

I've opened up #95 and would love to hear from you @silveltman !

[github-actions]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[RyanClementsHax]

I just released this feature in v4. @silveltman let me know if this addresses your issue.

https://www.npmjs.com/package/tailwindcss-themer

[silveltman]

@RyanClementsHax I'm currently trying out UnoCSS, but will try if/when switching back to tailwind