DEV Community

SpandyBoss
SpandyBoss

Posted on

Which CSS Framework should I use ?

Hey everyone I am in a confusion that what css framework shall I use for my projects Bootstrap or Tailwind? Comment down advantages and disadvantages and your own thought on both and feel free to ask or suggest something.

Thanks 😊

Discussion (18)

Collapse
natescode profile image
Nathan Hedglin

What do you need from a CSS framework?

You're putting the cart before the horse. Which problems are you needing to solve?

Boostrap has icons, components, grid system etc while Tailwind is purely a generated library of utility classes.

Collapse
spandyboss profile image
SpandyBoss Author

Hi Nathan Hedglin, I want to know the pros and cons of using Tailwind And Bootstrap eg are they customizable,? which one is seo friendly ?, which one is lighter? etc etc.

Collapse
natescode profile image
Nathan Hedglin

Pros and Cons depend on WHY you're using them.

Tailwind

Pros

  • fast prototyping
  • force limitation to generated classes that confirm to designs
  • completely customizable
  • prevents CSS from growing

Cons

  • some find many class names ugly
  • not a component library
  • really just CSS classes
  • fewer component libraries

Boostrap

Pros

  • extremely well known, used, documented
  • Sass support
  • highly customizable
  • has its own component library, icons, grid system etc.
  • huge ecosystem I.e. Reactstrap

Cons

  • if not customized it'll look like every other bootstrap site
  • grid system isn't really needed anymore
Thread Thread
spandyboss profile image
SpandyBoss Author

Thanks for sharing.

Collapse
wjplatformer profile image
Wj

Well, to be brutally honest here,

I feel that you should only use CSS frameworks to build websites in a short period of time (like a code jam or if your boss gives you a project). Using pure CSS without a framework can let you build websites tailored to the client or yourself, which is great.

But if you really want me to decide

I feel that choose whatever you want. They are equally good. Use both in fact. Like what @natescode said, each have their own features, pros and cons. Although I had never tried out Tailwind, they seem good to me. So do it, get out there and write some CSS! Maybe you can show me websites you made with these 2 frameworks!

Collapse
natescode profile image
Nathan Hedglin

Enterprises use frameworks. Most use BEM, Sass and bootstrap in my experience.

Collapse
wjplatformer profile image
Wj

Yeah, they have to deign things fast!

Collapse
spandyboss profile image
SpandyBoss Author

Ok thanks for you time

Collapse
spandyboss profile image
SpandyBoss Author

Ok I'll try using both of them.
Thanks for interacting.

Collapse
codefinity profile image
Manav Misra

Tailwind 💯. For one thing, when you learn Tailwind, you are still learning CSS (although, it's advisable to maybe do some vanilla CSS first).

When you are learning Bootstrap, you are really just learning Bootstrap magic classes that do a lot for you, but aren't really transferable.

The difference is that Tailwind is a utility library. You are still writing CSS using their classes (and various customizations, if desired), but those each translate to just 1-2 CSS rules at a time. U are just saving the time and trouble of having to jump into a separate CSS file and adding selectors,{}, etc.

Bootstrap is a full blown framework.

Collapse
spandyboss profile image
SpandyBoss Author

Ok, thanks for sharing I didn't knew that 🙂

Collapse
machy8 profile image
Vladimír Macháček

Try stylifycss.com ❤️.
It's a library that uses pure CSS selectors to generate optimized CSS. You don't have to study anything.
Just write selectors, get CSS and define components, variables and etc if you need to.

Collapse
spandyboss profile image
SpandyBoss Author

Ok I'll try

Collapse
tangtangtang profile image

Tailwindcss is very nice, Bootstrap I use its grid system and some interactive components like collapse. So HTML will be.

<div class="row -mx-8 md:-mx-4">
  <div class="col-3 col-lg-6 col-md-12 px-8 mt-12 md:px-4 lg:mt-8">
    <a class="item block">
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Also I converted mobile first to PC first

Collapse
spandyboss profile image
SpandyBoss Author

Ok, thanks for your time

Collapse
spandyboss profile image
SpandyBoss Author

Hey everyone, I'm seeing that this post is getting more and more views faster than any other and thanks for that, but I want your thoughts on Bootstrap Vs Tailwind kindly comment your thought here.

Thanks.

Collapse
invalidlenni profile image
InvalidLenni

I'm using picocss and I'm fine with that. Maybe you can try picocss.com/

Collapse
spandyboss profile image
SpandyBoss Author

Ok thanks for the suggestion, I'll surely try it out.