Are color previews supposed to work? - Githubissues

catppuccin / tailwindcss

💨 Soothing pastel theme for Tailwind CSS

https://tailwindcss.catppuccin.com/

MIT License

389 stars 6 forks source link

Are color previews supposed to work? #2

Open sophiiss opened 2 years ago

sophiiss commented 2 years ago

I got a bit disappointed when the little squares showing the color preview didn't work. I'm not sure if that's possible with plugins but it would be nice to have them.

nekowinston commented 2 years ago

I'm guessing that's IntelliSense for TailwindCSS? I'm not using GUI editors a lot, so I have not noticed this until now, sorry about that.

My guess would be, that the Preview has no idea which colour to show, since it's dependent on the parent classes like mocha or latte.

nekowinston commented 2 years ago

Just a quick update on this, I asked around the Discord, and color previews are not working at the moment, so it's not an issue on your end.

I reached out on the Tailwind Discord to get some additional input on how I could fix this. 🙂

sophiiss commented 2 years ago

Oh, okay! I was gonna do some digging around and see if I can find something. Maybe the plugin requires some specific configuration for the IntelliSense to recognize them?

nekowinston commented 2 years ago

I would be much obliged if you share any findings, hoping to get this fixed, if possible.

nekowinston commented 2 years ago

So after reaching out on the Tailwind Discord, I have learned about fallback colours in TailwindCSS. This Tailwind Play demonstrates the feature: colours with fallbacks get colour previews, while those which solely depend on CSS variables do not.

I guess the question is, if showing the colour of a single flavour, e.g. mocha, is better than not showing any sort of colour preview at all.

sophiiss commented 2 years ago

In my opinion, it would be better to show mocha colors than not showing any. Although I see how that can be frustrating for some people if they're using another variant as default.

nekowinston commented 2 years ago

I've played around with this quite a bit over the last days, sadly without making any headway at all.

Here are 4 approaches I've tried, none of them work:

The linked example from the Tailwind Discord (uses hex instead of rgba)
Explicitly adding it to the variable
Rewriting withOpacity to include a fallback variable
Using the new 3.1 Syntax

I'd have preferred to include a fix for this with the next package version, but I'll create a release to fix #3 now.

I'm unsure if we could solve this issue at the moment.