Theo's Typesafe Cult•2y ago

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•2y ago

Message Not Public

julius•2y ago

does it provide intellisense?

Unknown User•2y ago

Message Not Public

julius•2y ago

nice

nexxel•2y ago

interesting i always thought i hate cva but it seems nice thanks i'll try this i am loving it thanks!

Samyar•2y ago

https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes

Adding Custom Styles - Tailwind CSS

Best practices for adding your own custom styles to Tailwind.

Samyar•2y 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•2y 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!

benten•2y ago

cva is good, also twind has it's own standalone version which is typesafe (idk if cva is or not)

benten•2y ago

https://twind.dev/api/modules/twind_style.html

Twind

The smallest, fastest, most feature complete tailwind-in-js solution in existence

benten•2y ago

Although I've been thinking about this model and wondering if there isn't anything better

nexxel•2y ago

yes cva is very typesafe i am loving it

benten•2y ago

like you can do className={button({size: "small"})} /> and you get typesafety for each variant?

nexxel•2y ago

yeah

nexxel•2y ago

https://this-vegetable.is-from.space/Code_524vej0I06.mp4

Gaming

Programming

best way to create reusable components with tailwind and react