Can you critique my idea/methodology for a Tailwind UI lib + semantic color system combo?
I am still a pretty entry level dev (~2 years experience), and this is my first UI library. While I think this is a pretty good idea, I don't think I have the experience to be confident about it, so I am hoping you guys can point out some blind spots / pitfalls with this approach.
I've put up a docs site that goes into more detail https://www.chimera-ui.com/, but general idea is this:
- Put a thin wrapper around radix primitives with a layer of default styling, and then allow users to overwrite that styling with tailwind.
- Define a semantic color system and use that color system in the default styling
This means a lot of the predefined Tailwind styles are abstracted away. You could import this
but under the hood it actually has
I think the advantages here are:
- You can import components that look great out of the box, but you still get to keep the tailwind flow going
- Cleaner JSX, since a lot of the styles are abstracted away. You also don't need to redefine the same basic styles all over the place.
- By using semantic color names, you don't have to re-style components when you re-use them in other projects. For example, if you have
I've been keeping up with Theo's & the rest of Twitter's thoughts on TW. There's part of me that is worried that I am going against TW philosophy in a way, by abstracting some classes away. But then again, Daisy UI does that as well. What do you guys think? Thanks in advance!
I've put up a docs site that goes into more detail https://www.chimera-ui.com/, but general idea is this:
- Put a thin wrapper around radix primitives with a layer of default styling, and then allow users to overwrite that styling with tailwind.
- Define a semantic color system and use that color system in the default styling
This means a lot of the predefined Tailwind styles are abstracted away. You could import this
Buttonbut under the hood it actually has
h-10 py-2 px-4 bg-primary....I think the advantages here are:
- You can import components that look great out of the box, but you still get to keep the tailwind flow going
- Cleaner JSX, since a lot of the styles are abstracted away. You also don't need to redefine the same basic styles all over the place.
- By using semantic color names, you don't have to re-style components when you re-use them in other projects. For example, if you have
bg-blue-500bg-red-300bg-primaryI've been keeping up with Theo's & the rest of Twitter's thoughts on TW. There's part of me that is worried that I am going against TW philosophy in a way, by abstracting some classes away. But then again, Daisy UI does that as well. What do you guys think? Thanks in advance!
Was this page helpful?
