How to handle color codes in (medium-big) projects?
I recently purchased the tailwindui component library and it works amazing for small projects, as it allows me to quickly copy-and-paste components, which would take many hours design.
But, right now I'm building my first bigger project with tailwind, with custom colors, fonts etc.
What is the best way to manage different color codes with tw? I'm quite afraid of using codes like 'gray-100', as we may require a color change in the future,
and going back and adjusting all the colors would be a nightmare (as 'gray-100' could be used in different contexts, with differnt intentions).
My current approach would be to create variables for each available color, i.e. 'primary', 'primary-hover', 'surface', 'surface-contrast' etc. and let these point to some
of the default tw colors, as I find the default choice of colors to be quite good.
What are your experiences with this issue?
Also: How do you handle replication, when using React?
My current approach would be to simply create components, like 'Button', 'Modal' etc. and allow users to pass in props to customize them.
Looking forward to your tips!
4 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Maybe this talk will give you some ideas https://youtu.be/T-Zv73yZ_QI
Vercel
YouTube
Tru Narla: Building a design system in Next.js with Tailwind
Learn how to set up a design system in a Next.js application, and how to build an accessible and easily customizable user interface with Tru Narla, Software Engineer at Discord.
Design at the moment of inspiration: https://vercel.fyi/WEIb8yH
Speaker: https://twitter.com/trunarla
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I don't see the harm in passing in props like 'variant' etc. to be honest
Thanks, this is a good step forward to what I was looking for, but there still was no mention of the actual color-issue, as the application grows.