best way to create reusable components with tailwind and react

i am exploring different ways to create reusable components using tailwind and react and found this https://github.com/enochndika/kimia-UI/blob/main/src/packages/button/button.tsx. is this the best way to do this?
17 Replies
Unknown User
Unknown User4y ago
Message Not Public
Sign In & Join Server To View
julius
julius4y ago
does it provide intellisense?
Unknown User
Unknown User4y ago
Message Not Public
Sign In & Join Server To View
julius
julius4y ago
nice
nexxel
nexxelOP4y ago
interesting i always thought i hate cva but it seems nice thanks i'll try this i am loving it thanks!
Samyar
Samyar4y ago
you can add component classes it's kinda like the cva lib mentioned above
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
}
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
/* ... */
}
so u can use .select2-search instead of border border-gray-300 rounded
nexxel
nexxelOP4y ago
aaa i don't wanna use @apply tbh and this is like class based components i prefer the way cva does it where its prop based but thanks for the suggestion!
6enton
6enton4y ago
cva is good, also twind has it's own standalone version which is typesafe (idk if cva is or not)
6enton
6enton4y ago
Twind
Twind
The smallest, fastest, most feature complete tailwind-in-js solution in existence
6enton
6enton4y ago
Although I've been thinking about this model and wondering if there isn't anything better
nexxel
nexxelOP4y ago
yes cva is very typesafe i am loving it
6enton
6enton4y ago
like you can do className={button({size: "small"})} /> and you get typesafety for each variant?
nexxel
nexxelOP4y ago
yeah
nexxel
nexxelOP4y ago
idk if you mean this
6enton
6enton4y ago
interesting

Did you find this page helpful?