Add Tailwind color codes next to HSL colors in `globals.css`

Open aryanprince opened this issue 2 years ago • 2 comments

📝 Summary

File: globals.css after doing shadcn-ui init

❓ Why

VS Code doesn't show any color previews (when using HSL colors in CSS files by default)
This would be much easier for Tailwind devs to quickly know that *random HSL value* is just Tailwind's red-700
When you select Slate as your base color during shadcn-ui init, hopefully the comments could update to slate-950 in CSS file

💫 Inspo

Installing tremor.so shows Tailwind color codes right next to colors for easy reference

Nov 18 '23 23:11 aryanprince

The best part about this is that in colors.ts the color steps are documented, so that data could be used to generate the CSS file. Great graphics, very illustrative!

Nov 19 '23 02:11 Gravy59

The best part about this is that in colors.ts the color steps are documented

Ahh that's perfect, didn't know that was there. That's pretty helpful!

Great graphics, very illustrative!

Thanks man, appreciate it :)

Nov 19 '23 02:11 aryanprince

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Feb 12 '24 23:02 shadcn

Could I possibly work on this if this is something you'd like to implement?

Feb 13 '24 06:02 aryanprince