DEV Community

Cover image for The reason why I chose Tailwind over Bootstrap
Jabo
Jabo

Posted on

The reason why I chose Tailwind over Bootstrap

Summary

In this blog post I will talk about the reason why I chose tailwind over bootstrap while building my portfolio website I will give some things that I liked and didn't liked in both frameworks


Introduction

I've been wanting to redesign my portfolio website since it hasn't been update for almost a year. I'm used to creating my UI designs completely from scratch since using framework/tools give me headache. Now I wanted to level up my game using CSS frameworks.


Bootstrap

I've been playing around with CSS frameworks in the past couple of months I first got introduced on Bootstrap by google.com since it was "The most popular HTML, CSS, and JS library in the world." The first problem that I had using Bootstrap was, it is hard to customize the look and feel of my website while using it. The things that I liked about bootstrap is its built-in UI component and it's awesome plugins made by other developers.

Tailwind

After using Bootstrap I gave up working on my portfolio and worked on other side projects. After a couple of months I gained back my motivation on finishing my portfolio finally I looked up some CSS frameworks and I got into Tailwind's website and I got fell in love with it immediately because first of all, The documentation is really really really good it took me just a couple of hours to understand how things works. The things that I liked on this framework is it has no default theme meaning, I can easily customize the colors with just a few lines of code, You can literally style your page just in your HTML file

After a couple of research I came across with this really great article which really gave me a motivation to not look back on Bootstrap ever again.

I highly recommend reading the article above if you'll ever want to use Tailwind.

Here is the result of my portfolio using Tailwind

Conclusion

Both frameworks are great both have pros and cons I'll definitely use either of them in the future!

Discussion (2)

Collapse
perpetual_education profile image
perpetual . education • Edited on

How can you live with the markup?

https://dev-to-uploads.s3.amazonaws.com/i/eojs6eejhqyme23pj8r2.png

(of either)

It seems like the browser should just return "Error: extremely ugly and improper HTML"

When you could write the markup properly - and style is with CSS?

<user-card>
  <picture class='avatar'>
    <img src='https://place.com/image/1'>
  </picture>

  <h1 class='name'>@ivy</h1>
  <h2 class='title'>Experience at Perpetual Education</h2>

  <footer class='actions'>
    <a class='link' href='/ivy'>Message me</a>
  </footer>
</user-card>
Collapse
supportic profile image
Supportic • Edited on

"You can literally style your page just in your HTML file"
Bootstrap allows you to do exactly the same

"I can easily customize the colors with just a few lines of code,"
Here are all default colors located, which can be overwritten with e.g. "$primary: #yourColor"
github.com/twbs/bootstrap/blob/390...
more about theming here: getbootstrap.com/docs/4.5/getting-...