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.

Tailwind CSS Resources you wish you had.

Jane Tracy 👩🏽‍💻 ・ Sep 13 '20 ・ 6 min read

#css #tailwindcss #productivity #webdev

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!

Comments

[Rob Levin]

I think it's good to probably do a project in each BS and TW. They're both apples and oranges but hugely popular. Even if you come to realize you hate one of them you'll be well served having played with both.

That said, I'd also recommend having a look at open props: open-props.style/ it's kind of similar in spirit to TW in that you have these utitlies but they're CSS custom properties. So, you could actually take a component approach like Bootstrap, but assemble mainly using the custom properties from open props. Or, you could literally use open props inline in the style tag. That would personally kind of freak me out. But I'm an old guy haha. But yeah, check out this approach as an alternative.

[perpetual . education]

How can you live with the markup?

(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>

[Supportic]

"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-...