RyanClementsHax / tailwindcss-themer

An unopinionated, scalable, tailwindcss theming solution

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HSL values with opacity break

silveltman opened this issue ยท comments

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

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

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.

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

๐ŸŽ‰ 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. @silveltman let me know if this addresses your issue.

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

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