A couple of years ago I fell in love with Bootstrap. Back then, when I had almost zero experience with HTML, CSS or any other programming language whatsoever, Bootstrap seemed like it was the perfect framework that I would be using for the rest of my life. It’s easy to use, the docs are very clear, it was being used in a huge lot of websites and there were plenty of tutorials about it on the internet. Over the past few years I had heard about other CSS frameworks but they never really seemed interesting to me so I just stuck with Bootstrap.
However, a couple of weeks ago, when I was following a VueJS course to fresh up my knowledge, the tutor introduced me to Tailwind CSS. While this framework wasn’t completely new to me (I had heard of it before), I had actually never delved into it. When using Bootstrap I was using lots of custom CSS classes, which often led to a very inconsistent and messy code (which was mostly my own fault, but still). As I followed along with the course, I decided to give Tailwind a try, just to see if it’d actually be easier or improve my workflow. And, spoiler alert, it did!
For the people who don’t know Tailwind: it’s a utility-first CSS framework which is highly customizable (that’s what it says on their site). Comparing it to Bootstrap is actually not fair, as Bootstrap is more of a UI kit. Tailwind hasn’t really got a default theme and it doesn’t contain any templates or components out of the box. The idea behind Tailwind is that anything can be easily changed. If you’ve worked with Bootstrap before, like me, you’ve probably found yourself creating classes that come close to Bootstrap’s classes but just needed to be just a little bit adjusted too often. That (almost) doesn’t happen with Tailwind. For example, when you specify a color in Tailwind, it’ll automatically generate a whole list of classes for that color. Let’s say we want to add #C7EA46 (Lime) as a color, we simply add it to the colors object in the Tailwind configuration file. Classes like bg-lime and text-lime will then be automatically generated. This actually goes a lot farther than just colors, as you can also specify variants, breakpoints and almost any other CSS property. If you really want to get to know the power of Tailwind, I’d just recommend you to check it out!
Let’s get back to why I switched. I wanted to make something simple using Tailwind, so I started by drafting a basic dashboard design in Adobe XD, just to have an idea of what I wanted to create. I have used Bootstrap a lot to create websites like this in the past, so it was a good idea to compare the power of Tailwind against Bootstrap’s. When the initial design was completed I set up a fresh Vue project and installed Tailwind. I won’t be going into detail too much on how to do all of this as the original Vue and Tailwind docs are pretty straightforward. One thing I do want to point out is that I ran the npx tailwindcss init --full command to get a complete configuration file. I preferred this option because, as someone without any experience with Tailwind, this gave me a good insight into a lot of the features of the framework, which made the learning curve a bit easier.
As soon as I started writing some code, I noticed how much more extended Tailwind is compared to Bootstrap. Again, you can’t really compare them, but still. With so many new classes available you’d think it would be easy to get lost in all the different names, but because the naming of the classes is very consistent (and I was using an IDE with auto-completion), it was really easy to find the right classes. Of course, sometimes I had to look something up in the Tailwind docs or run a search through Google, but overall I felt like my workflow was much faster than when I was using Bootstrap. When I had the initial design finished, I noticed that I had only written 3 (!) custom classes to create a complete dashboard theme, which was also responsive and included details like transitions, animations, etc. With Bootstrap this would normally have cost me a lot more time than it did using Tailwind.
Besides having a better workflow, it also keeps your code clean and easy to read. Yes, you sometimes do have to add a lot of classes to just one element, but you instantly know what each class is for and you can easily change the element when you need to instead of having to go through 5 different files to finally find the location of a property. Maybe that’s a little bit exaggerated, but trust me, back when I started coding I had tons of CSS files and inline styling tags which made my code literally unreadable.
I don’t want to make this article too long, it’s not meant to teach you all the details about Tailwind and I’m sorry if you came here for that, but I just wanted to share why I switched over and how it helped me improve my work. Hopefully, for those who haven’t used Tailwind yet, you give it the benefit of the doubt and try it out. Just once. That’s all it took me to switch over from Bootstrap and I probably won’t ever go back anymore.
English 
Dutch