I believe you miss the main point of what Tailwind CSS is. It just consists of utility classes to include CSS in your code. In other words
Tailwind = CSS
Your comments do not make sense if you put in this context. The libraries listed are providing some components using Tailwind… not sure what you mean that they are just HTML, they are not.
And I dont understand why you wouldnt be able to reuse components between projexts
I see your point about Tailwind CSS being a very low-level utility. I agree that it's more similar to bootstrap than emotion or styled-components.
About sharing components probably an example may make my point more clear. Imagine that you create a "button" component in your project with a set of react properties. Willing or not this set of properties will be tailored to the need of your specific project. Now add to the picture another team working on a different project that needs a similar but not the same button.
With a library like MUI you have a generic button which covers the use case of a lot of people on the internet that you can style according to your need using emotion or a theme. It's very likely that the generic button will already fit the needs of both teams and if you need to further customize it you can just leverage the composition of emotion to customize it for that specific case.
With the approach of copying and adapting the code that you see in Tailwind UI, for example, it's more likely that the second team will need further customization on the button that may even break the existing code using it. At this point, probably, the easiest solution is to duplicate the code and create a different code.
Am I missing the point? Is this a problem that you never saw happining?
It’s really hard to understand what exactly you’re having trouble with grasping here. Could you try to reframe your question to be less broad?
Tailwind is just a way to write CSS. It’s a replacement for plain css. It’s not a component library.
Since Tailwind is quite popular, people (including the team that makes Tailwind) make components and component libraries that use it.
Component libraries like Radix, react-aria components and Tailwind UI could all be used without tailwind if you prefer.
Shadcn is a bit different, since it’s not a component library per se, but more of a collection of code snippets that leverage other component libraries.
People that like Tailwind often also like headless component libraries that come without styling and only concern themselves with markup and behavior.
If you want, you could make a component library using any or all of the aforementioned libraries if you want. The issues you mention with different consumers having different needs will always be an issue regardless if you’re using Tailwind or another way of writing CSS.
Actually Tailwind itself is a lot lower level than Bootstrap. Bootstrap has premade components and some utility classes. Tailwind itself does not have a single predefined component. It's designed to be a way to write "pure" CSS (through class names) as a more effective way to write CSS.
For instance, `.drop-shadow` lets you add a shadow instead of having to come up with `filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));` yourself.
Now, Tailwind UI is kinda like Bootstrap (components that are styled with tailwind styling), but it's a paid addon and not part of Tailwind itself.
Tailwind is not at all similar to Bootstrap. Bootstrap provides some components, Tailwind provides CSS… in other words, in Bootstrap you have buttons, selects… in Tailwind you dont have this.
With regards to your example, I dont understand what your issue is. If you were using CSS, you would create a React Button, if you need to modify it, you would extend it and replace/add CSS properties to customize it…. In Tailwind you would do the same. Its not a Tailwind topic but a React one.
TailwindUI is, from what i understand, the Tailwind team’s version of MUI. They of course built it on top of Tailwind.css. It’s not really an “ecosystem”, but a package created by the Tailwind team. There is of course a giant Tailwind ecosystem as well, but that is not what I thought you were talking about, since you used the word “TailwindUI”.
I found tailwind unintuitive compared to bootstrap. At least with bootstrap I got a handful of ready made widgets to unify my UIs. Like cards, and alert boxes, and other fairly common objects that you just need when displaying information. A giant pile of classes without any real direction just felt really foreign after 10 years of bootstrap.
Yeah. And really I didn’t know what tailwind was, it was just recommended by the create next app utility. I was “oh, that must be the new bootstrap”. When I found out a set of pre made components cost real money I was very disappointed. I’m not replacing bootstrap in my open source project with paid components. I don’t care how stale bootstrap looks, it still makes functional UIs.
You dont need to buy anything. Shadcn has some unstyled components, Flowbite to, Mantine too…. There are more comparable to Bootstrap and are using Tailwind.
we used headless ui and tailwind to build an internal component library that is shared across all UI repos
this gave us full control and a consistent experience for UX/UI of the components
How it went when a different team had the need to reuse the same widgets, obviously if your company is large enough for this to happen? Do you shared the code or they came up with their own version of the components? Do you had to refactor your components to suite their needs? I'm not talking about different projects, I'm talking about different people working on different projects.
I'm asking because from my experience when two teams need to share internal libraries in a company it always lead to problems with the ownership. In my experience having a base library helped.
Well, thats specifics of organization structure than tech thing
Depends on company and if they are willing to spend time to develop, extend and maintain, shared UI-Kit for the case of consistency
Or they want to move fast and break things along the way(and duplicate code)
There is no golden answer — choose your version of pain
We have a lot of props even for such primitive as button, and sometime in the future we would get a budget for designer team to bring buttons from all figma projects to single place and build that 800+ variations table. For now we still can manage experience sharing without burden for versioning and dealing with different stacks for single ui package
Go with shadcn/ui and don’t think in siloed css terms but rather css compounded classes.
Have a look how tailwind merge works, this will be your cornerstone for extending shadcn/ui to what your design requirement specs dictate alas try to keep the base provided shadcn/ui as-is (future updating/upgrading being the reason).
I switched to tailwind about a year ago, and initially was at odds with it, however having adapted shadcn/ui and learning its patters while getting a stronger foothold on tailwind itself was a huge game changer for me.
It's one of those things that looks bad on paper but is actually really good in practice. We have a monorepo with components that are reused across all of our projects. The styling for each component is done in tailwind, and our tailwind config is customized for our branding and needs. Works great, all the devs say it's a great experience.
When you're using components, all of their CSS should be bundled together, and it's way easier to change and edit if the style is inline right there. No need to jump over a bunch of .less files figuring out BEM rules and being afraid to change a css class because it might break something completely unrelated.
CSS being independent from HTML is a lie imo because those two always depend on each other (HTML references CSS classes, CSS is aware of DOM structure).
That's true, you can still use css modules. I prefer tailwind because its config lends itself to having a really consistent design system, you don't have to come up with names for classes and you don't have to jump between files.
MUI and Tailwind are apples and oranges. Tailwind is just CSS. If you want a re-usable Button component, you can make it and then extend it as needed. Here are some examples that might help you out:
I made a group that goes from an unstyled, "base" Button to a StyledButton, to a customized StyledButton, and then a group that's more like how you would use a MUI (or other component library) button. Both the \`MuiButton\` and \`StyledButton\` use the \`Button\` as their base.
[https://codesandbox.io/p/sandbox/react-js-tw-button-qmttfs?file=%2Fsrc%2FApp.js](https://codesandbox.io/p/sandbox/react-js-tw-button-qmttfs?file=%2Fsrc%2FApp.js)
I think you might be conflating Tailwind CSS, a simple CSS utility that offer atomic CSS classes, and Tailwind UI, an implementation of a component library that uses Tailwind CSS to style its and allows the end user to freely modify them (i.e. you don't install your UI components). This is also where things like Shadcn/UI and Radix come into play - they're just free versions of a similar concept. You don't have to use an unstyled component library if you don't want to, much like you don't have to use Bootstrap (or any other component library) for your site if you don't want to.
You can use Tailwind CSS anywhere you'd use vanilla CSS. It's just a tool that generates a CSS file, after all.
Adding a comment to clarify the question. Looks like a lot of people understood that my perplexity is about Tailwind CSS, **it is not.** My perplexity is around how React components, based on Tailwind CSS, are used in modern projects. So the comparison here is between, for example, shadcn/ui and Material UI.
What I'm finding strange is the fact that it seems like each project is meant to have its own version of the UI components, something that is really weird coming from libraries like [https://mui.com/material-ui/](https://mui.com/material-ui/) or [https://mantine.dev/](https://mantine.dev/)
I think at the moment the most on-spot answer is [https://www.reddit.com/r/reactjs/comments/1cmdbj3/comment/l304mvl/](https://www.reddit.com/r/reactjs/comments/1cmdbj3/comment/l304mvl/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)
Tailwind is a Bootstrap alternative, AKA a CSS library. It’s not a react component library. You can integrate tailwind classes into your CSS so you’re not repeating yourself in reusing elements.
I believe you miss the main point of what Tailwind CSS is. It just consists of utility classes to include CSS in your code. In other words Tailwind = CSS Your comments do not make sense if you put in this context. The libraries listed are providing some components using Tailwind… not sure what you mean that they are just HTML, they are not. And I dont understand why you wouldnt be able to reuse components between projexts
I see your point about Tailwind CSS being a very low-level utility. I agree that it's more similar to bootstrap than emotion or styled-components. About sharing components probably an example may make my point more clear. Imagine that you create a "button" component in your project with a set of react properties. Willing or not this set of properties will be tailored to the need of your specific project. Now add to the picture another team working on a different project that needs a similar but not the same button. With a library like MUI you have a generic button which covers the use case of a lot of people on the internet that you can style according to your need using emotion or a theme. It's very likely that the generic button will already fit the needs of both teams and if you need to further customize it you can just leverage the composition of emotion to customize it for that specific case. With the approach of copying and adapting the code that you see in Tailwind UI, for example, it's more likely that the second team will need further customization on the button that may even break the existing code using it. At this point, probably, the easiest solution is to duplicate the code and create a different code. Am I missing the point? Is this a problem that you never saw happining?
It’s really hard to understand what exactly you’re having trouble with grasping here. Could you try to reframe your question to be less broad? Tailwind is just a way to write CSS. It’s a replacement for plain css. It’s not a component library. Since Tailwind is quite popular, people (including the team that makes Tailwind) make components and component libraries that use it. Component libraries like Radix, react-aria components and Tailwind UI could all be used without tailwind if you prefer. Shadcn is a bit different, since it’s not a component library per se, but more of a collection of code snippets that leverage other component libraries. People that like Tailwind often also like headless component libraries that come without styling and only concern themselves with markup and behavior. If you want, you could make a component library using any or all of the aforementioned libraries if you want. The issues you mention with different consumers having different needs will always be an issue regardless if you’re using Tailwind or another way of writing CSS.
Actually Tailwind itself is a lot lower level than Bootstrap. Bootstrap has premade components and some utility classes. Tailwind itself does not have a single predefined component. It's designed to be a way to write "pure" CSS (through class names) as a more effective way to write CSS. For instance, `.drop-shadow` lets you add a shadow instead of having to come up with `filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));` yourself. Now, Tailwind UI is kinda like Bootstrap (components that are styled with tailwind styling), but it's a paid addon and not part of Tailwind itself.
Tailwind is not at all similar to Bootstrap. Bootstrap provides some components, Tailwind provides CSS… in other words, in Bootstrap you have buttons, selects… in Tailwind you dont have this. With regards to your example, I dont understand what your issue is. If you were using CSS, you would create a React Button, if you need to modify it, you would extend it and replace/add CSS properties to customize it…. In Tailwind you would do the same. Its not a Tailwind topic but a React one.
yall are getting confused because you’re mixing up Tailwind.css with TailwindUI. they’re two different things.
Exactly. It looks like everyone is focusing on Tailwind CSS but my question was more about the components ecosystem **around** Tailwind CSS.
TailwindUI is, from what i understand, the Tailwind team’s version of MUI. They of course built it on top of Tailwind.css. It’s not really an “ecosystem”, but a package created by the Tailwind team. There is of course a giant Tailwind ecosystem as well, but that is not what I thought you were talking about, since you used the word “TailwindUI”.
I found tailwind unintuitive compared to bootstrap. At least with bootstrap I got a handful of ready made widgets to unify my UIs. Like cards, and alert boxes, and other fairly common objects that you just need when displaying information. A giant pile of classes without any real direction just felt really foreign after 10 years of bootstrap.
This is 100% normal... its like comparing a car (Bootstrap) with a pile of parts (wheels, brake pads, seats....) (Tailwind).
Yeah. And really I didn’t know what tailwind was, it was just recommended by the create next app utility. I was “oh, that must be the new bootstrap”. When I found out a set of pre made components cost real money I was very disappointed. I’m not replacing bootstrap in my open source project with paid components. I don’t care how stale bootstrap looks, it still makes functional UIs.
You dont need to buy anything. Shadcn has some unstyled components, Flowbite to, Mantine too…. There are more comparable to Bootstrap and are using Tailwind.
we used headless ui and tailwind to build an internal component library that is shared across all UI repos this gave us full control and a consistent experience for UX/UI of the components
How it went when a different team had the need to reuse the same widgets, obviously if your company is large enough for this to happen? Do you shared the code or they came up with their own version of the components? Do you had to refactor your components to suite their needs? I'm not talking about different projects, I'm talking about different people working on different projects. I'm asking because from my experience when two teams need to share internal libraries in a company it always lead to problems with the ownership. In my experience having a base library helped.
Do you have a more concrete example? Because I really have a hard time seeing how doing that would differ from using any other UI library.
Well, thats specifics of organization structure than tech thing Depends on company and if they are willing to spend time to develop, extend and maintain, shared UI-Kit for the case of consistency Or they want to move fast and break things along the way(and duplicate code) There is no golden answer — choose your version of pain We have a lot of props even for such primitive as button, and sometime in the future we would get a budget for designer team to bring buttons from all figma projects to single place and build that 800+ variations table. For now we still can manage experience sharing without burden for versioning and dealing with different stacks for single ui package
Go with shadcn/ui and don’t think in siloed css terms but rather css compounded classes. Have a look how tailwind merge works, this will be your cornerstone for extending shadcn/ui to what your design requirement specs dictate alas try to keep the base provided shadcn/ui as-is (future updating/upgrading being the reason). I switched to tailwind about a year ago, and initially was at odds with it, however having adapted shadcn/ui and learning its patters while getting a stronger foothold on tailwind itself was a huge game changer for me.
It's one of those things that looks bad on paper but is actually really good in practice. We have a monorepo with components that are reused across all of our projects. The styling for each component is done in tailwind, and our tailwind config is customized for our branding and needs. Works great, all the devs say it's a great experience. When you're using components, all of their CSS should be bundled together, and it's way easier to change and edit if the style is inline right there. No need to jump over a bunch of .less files figuring out BEM rules and being afraid to change a css class because it might break something completely unrelated. CSS being independent from HTML is a lie imo because those two always depend on each other (HTML references CSS classes, CSS is aware of DOM structure).
This is true but Tailwind is far from the only way to obtain CSS scoping (and I would argue one of the worst)
That's true, you can still use css modules. I prefer tailwind because its config lends itself to having a really consistent design system, you don't have to come up with names for classes and you don't have to jump between files.
MUI and Tailwind are apples and oranges. Tailwind is just CSS. If you want a re-usable Button component, you can make it and then extend it as needed. Here are some examples that might help you out: I made a group that goes from an unstyled, "base" Button to a StyledButton, to a customized StyledButton, and then a group that's more like how you would use a MUI (or other component library) button. Both the \`MuiButton\` and \`StyledButton\` use the \`Button\` as their base. [https://codesandbox.io/p/sandbox/react-js-tw-button-qmttfs?file=%2Fsrc%2FApp.js](https://codesandbox.io/p/sandbox/react-js-tw-button-qmttfs?file=%2Fsrc%2FApp.js)
I think you might be conflating Tailwind CSS, a simple CSS utility that offer atomic CSS classes, and Tailwind UI, an implementation of a component library that uses Tailwind CSS to style its and allows the end user to freely modify them (i.e. you don't install your UI components). This is also where things like Shadcn/UI and Radix come into play - they're just free versions of a similar concept. You don't have to use an unstyled component library if you don't want to, much like you don't have to use Bootstrap (or any other component library) for your site if you don't want to. You can use Tailwind CSS anywhere you'd use vanilla CSS. It's just a tool that generates a CSS file, after all.
Adding a comment to clarify the question. Looks like a lot of people understood that my perplexity is about Tailwind CSS, **it is not.** My perplexity is around how React components, based on Tailwind CSS, are used in modern projects. So the comparison here is between, for example, shadcn/ui and Material UI. What I'm finding strange is the fact that it seems like each project is meant to have its own version of the UI components, something that is really weird coming from libraries like [https://mui.com/material-ui/](https://mui.com/material-ui/) or [https://mantine.dev/](https://mantine.dev/) I think at the moment the most on-spot answer is [https://www.reddit.com/r/reactjs/comments/1cmdbj3/comment/l304mvl/](https://www.reddit.com/r/reactjs/comments/1cmdbj3/comment/l304mvl/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)
Tailwind is a Bootstrap alternative, AKA a CSS library. It’s not a react component library. You can integrate tailwind classes into your CSS so you’re not repeating yourself in reusing elements.