Using different resources to style pages #
For styling HTML/web pages, can we use different libraries/resources at the same time? For example, we may like to use navbar from bootstrap and use tailwind CSS to style other components and at the same time use pure CSS for other components on the same page. Will this be possible or will it create conflicts?
11 Replies
yes, it's possible. And yes, it probably will create conflicts, especially combining bootstrap and tailwind.
you can combine either with vanilla CSS without any issues though, and very likely always will ( or at least should in the case of Tailwind)
What about pre made components provided by UI libraries like Daisy UI, material UI or Ant Design? Can i fetch different components from different libraries at same page?
It Depends™️
If there's colliding class names, especially if your framework doesn't scope its css, there'll be issues. But a lot of the time it'll probably work?
Thanks for helping out.
I have faced issue of conflict between bootstrap and tailwind.
I imagine so, they've both got a ton of utility classes with obvious names
mixing ui frameworks is a shortcut for disaster
not to mention the bloat
avoid it at all costs
But sometimes while using UI libraries, we don't get desired components from a single source. We have to use components from different sources. In such case, will there be conflict? I am not referring to bootstap and tailwind in this case. I am taking about pre-built components.
probably, you cant know until you try
if you need specific components, try checking shadcn
why would you even mix bootstrap and tailwind? bootstrap is meant to be used with vanilla css/scss and tailwind is standalone. you need to make your own components in tailwind unlike in bootstrap which is already provided
The way I would do it is to use a very light-way CSS framework to start with (classless probably) but with some variables defined. Not sure I would want a gridsystem in that framework (as displays for flexbox and grid is more or less enough these days) but maybe.
Then for each component I would add I would "translate" it into my CSS framework and add classes for that component.
It's possible to mix libraries but I wouldn't recommend it. This is a constant pain in the application i'm building. We're mixing mui with our own custom code and other ui libraries are mixing in too, which turns into a big mess very quickly. I'd recommend you to stick to one system and keep that consistent. Honestly with modern css it's pretty easy to build your own stuff. The only hard thing about css is naming classes. If you want to use a component library you'll have to add in your own styles at some point anyway. Try to keep that clean and avoid mixing multiple component libraries, that's where it becomes really messy.
In the project i'm working on we use styled components which removes the need for naming classes. You still need to name the components, which are react elements, but they're namespaced to that file unless you export them. I find this works really well to keep your own code nicely distinct from whatever other libraries you're importing