Tailwind CSS vs Component Framework
When learning Vue.js a month ago I think Vuetify library is a really good component framework for creating a website because I’m very familiar with Bootstrap. Also, Vuetify is using material design for its component so Vuetify will give us a good looking and responsive component like Bootstrap. So if you used to use a component Framework like me you can read this article to know and maybe learn another framework that exists.
As I’m still learning Vue.js we were working on a project using Tailwind CSS. At first, using Tailwind CSS stressed me out. I get used to create an object using bootstrap and now I must create and design it from scratch. before we know how to use Tailwind CSS we must know what is Tailwind CSS. Based on their website Tailwind CSS is a utility-first CSS framework for rapidly building custom designs and a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke design without any annoying opinionated style you have to fight to override. Now I want to compare buttons created using Bootstrap and Tailwind CSS.
<button type="button" class="btn btn-primary">Button</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">
Button
</button>
As you can see from the code to create a button tailwind using class to fully modify its component. Instead of using a class name like btn-primary, btn-danger, or btn-warning in Bootstrap, we use the class to describe the style of an object. Instead of styling your object using basic CSS we’re using our class to styling an object in Tailwind CSS. After knowing this, I must change my mindset of creating an object. Creating an object in Tailwind most likely to fully describe what you want to be on an object and put it in a class instead of calling the object class name. In Bootstrap to describe a bookshelf, you just need to describe it as a “white bookshelf”.
In Tailwind CSS to describe a bookshelf, you must describe it as a white bookshelf with 3 rows and using a wood material”. Because of that detail description, I think there are advantages of Tailwind CSS instead of Bootstrap or Vuetify. You can easily customize your object as wild as you want. If a website uses a component-based framework it’ll have a similar look to another website that uses the same component-based framework. If you want to develop a website rapidly with a standard material design I suggest you go on component-based framework but if you have some spare time to custom your website then I think you can go with a utility-first framework.
Conclusions
Well after using Tailwind CSS for a few weeks I’ll still choose a component-based framework to develop my website. :P
