Hey Does anyone have experience building reusable ui components in react + tailwind setup? Are you using

@apply

or just react component with classes? I am finding it very ugly for small components like buttons to have react components with a tonne of classes

I have built reusable components using vue and tailwind at work and I usually go with

@apply

although if you’re using react you could checkout https://headlessui.dev/ too.

@few-toddler-51984 Yes. I was thinking of using

@apply

but last line of this section stopped me.

If you’re going to use 

@apply

, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction Does that mean we shouldn't consider using

@apply

in React/Vue? Do you think using

@apply

has worked out well?

I wouldn't recommend using tailwind for making a component library. I'd suggest going to styled-components or something similar. It's pretty easy to override things, use themes etc.

@dazzling-author-99268 We are using tailwind for whole website. So I don't think it makes sense to structure it like using styled-components for base components, and duplicating tailwind theme with styled components theme.

In that case, I'd recommend checking out https://daisyui.com/components/button to see how they've built it.

Aah. Thanks @dazzling-author-99268 I will check it out.

Hey @dazzling-autumn-14365 I have built up React + Tailwind components quite a few times. None of the projects were large. The new one will be large. Each time I go through all best practices and adapt. I have never doubted the choice though.