Tailwind vs CSS

It can be so tiring to write multiple lines of CSS styling in our web apps. One of the challenges I always face in using HTML and CSS is usually coming up with generic class names for my elements, but Tailwind CSS or Bootstrap comes in as an aid. The debate between which is best always springs up amongst developers and my peers at HNG usually try to convince me that Bootstrap is best, but I still take Tailwind CSS.

This era of web development has evolved that frameworks and libraries are being utilized by developers to make codes much simplified and easier to be used. After the reading this article, you should be able to: know what the frameworks are: get the differences & similarities between Tailwind CSS and Bootstrap; know which one to go for; and actually get know how and where to get started using them.

When should I start using CSS Frameworks?

As a beginner, you can start using CSS frameworks when you know all the CSS required to build a good-looking user interface.
You should be able to use CSS to build responsive layouts that support different screen sizes, some basic flexible layouts, use grid layouts etc.
You shouldn't be in a haste to learn a CSS framework when you don't have a solid foundation of CSS.

Tailwind 🆚 Bootstrap

If you have checked the official documentation of the above frameworks, you will get to know more about them.
If you haven't, I got you.

Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. It is packed with classes flex, pt-4, text-center and rotate-90 etc which simply means you don't have to think of class names for your html elements and not also writing long css stylings

Without Tailwind

//HTML
<button class="subscribe-button">Subscribe </button>

//CSS
.subscribe-button {
   padding-right: 1rem;
   padding-left: 1rem;
}

With tailwind

//HTML
<button class="px-4">Subscribe </button>

You can see that writing just px-4 in the class attribute in Tailwindcss is equivalent to writing the class name and padding-right: 1rem; & padding-left: 1rem; in CSS

Bootstrap

Bootstrap is a UI (User Interface) Toolkit, which means it has pre-built components for buttons, modal, accordian, navbar, footers etc.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Result.

You can see that you don't need to write much styling for a button you will just need to specify what kind of button it is.

Tailwind & Bootstrap Differences

• Application created using Tailwind are always flexible and unique whereas that of Bootstrap are generally identical because it already has in-built templates for websites.
• Tailwind offers unique utility-first classes while Bootstrap offers ready-made themes and templates.

Tailwind & Bootstrap Similarities

• Less CSS codes
• The usage of the both frameworks makes the developer not to worry about class names for the elements.
• It saves the developer's time trying to write css properties.
• You might have to always run back to the documentation to get the setup procedure and correct class name for what you want to achieve.

Which one should I choose?

There's no better answer to which is better or the best,it all lies on developer's preference.
If you'll need a website ready within a short period of time, Bootstrap is the best fit as it has pre-built components like sidebars, buttons, navbars, footers, cards, accordian, alert, spinner etc.
If you'll need your site to look unique and flexible (being able to design it to your taste), then Tailwind is the best fit.
Most developers often say that Tailwindcss makes code ugly to be read because of the numerous utility classes you will have to write to achieve your design, so if you happen to agree with them, then you should consider using Bootstrap.

Installation

Both frameworks require certain procedures to be followed before you can start using them. You'll have to head over to Tailwind CSS doc & Bootstrap doc for the setup procedure. I wrote this article to onboarding you to the frameworks.

Conclusion

In this article, you have learnt when you can start using any of the framework, how they differ, what they share in common, which one to choose.
Enroll as a frontend developer at HNG to gain more experience.