I Recreated a Bootstrap Website with Tailwind CSS, And Here Are The Differences
This article was originally published on my personal blog
Every web developer starts with Bootstrap. It's easy to use and saves so much time creating a website. Bootstrap is a necessity that every web developer relies on, whether beginner or advanced.
However, recently, I've been hearing a lot about Tailwind CSS. I kept seeing people on Twitter and articles talk about it, that I got curious and wanted to try it out.
So, I decided to recreate the website for sButtons, an open-source project I maintain. Originally, it was built with just HTML and Bootstrap. This is how it looked like:
The reason I chose to rebuild it was actually because it was getting hard to maintain all its components as it grew since it was just HTML. As it was easier to make these components reusable, I decided to recreate it with React, and also give it a different, new look as well.
As great as the first design was, I wanted to try something more flat, simple, and easier to navigate.
After building it with React and Tailwind CSS, this is the new website:
A much simpler website that conveys the message behind "Simple buttons".
Although the design changed tremendously, this is not what I will be comparing here. What I will be comparing is my experience working with both Bootstrap and Tailwind CSS and which is better.
They're not The Same
Although the purpose of Tailwind CSS and Bootstrap might be similar, however, they're different. Tailwind CSS is more focused on providing easy-to-use utility classes to save you time. As their documentation says: "No more adding silly class names like sidebar-inner-wrapper just to be able to style something." It also encourages creating reusable components with these utility classes.
Bootstrap also provides easy-to-use utility classes, however, from its early versions, Bootstrap is focused on helping you create websites quickly by providing you with designed common UI elements. Just by copy-pasting the code, you will get a navigation bar on your website.
Adapting To Change
When I first started trying out Tailwind CSS, I struggled a little as I was used to just use whatever ready-made components Bootstrap provides me then make changes on them accordingly. With Tailwind CSS, I had to create those components myself, which at first I thought would cost me more time and effort.
However, as I kept learning it and getting the hang of it, it kept getting easier and easier. My thinking directly shifted to the "Tailwind CSS" mindset, and building components got easier. I no longer had to rely on copy-pasting code. The utility classes Tailwind CSS provides help you understand how you are creating and styling your components, and you can do that without having to actually write CSS.
I got so used to using the classes Tailwind CSS provides, that even when I'm working on other projects my first instinct is to use them.
Responsive Design and Dark Mode Made Easy
Among many of Tailwind CSS's available classes, you can easily make any rule or class adhere to responsive design by adding a prefix to it based on the screen size you're targeting.
For example, if I want to make an element's width 50% on all screens, but make it 100% on small screens, I can do it easily like this:
<span class="md:w-6/12 w-full">I'm responsive!</span>
No need to struggle with media queries anymore! You can add prefixes like md:, sm: and others as well to almost all utility classes provided by Tailwind CSS.
In Bootstrap, this is provided to some utility classes, however, I don't think it's flexible enough and you'll end up having to write your own media queries.
Next comes dark mode. Dark Mode is now a necessary feature of any website. Making your website dark mode compatible can be a hassle. It depends on how you build components in your website as well.
Tailwind CSS provides easy to use solution to make your website dark-mode compatible. Simply when styling elements, you can just add the prefix dark: to add styling that will be applied only when dark mode is turned on.
For example:
<div class="bg-white dark:bg-gray-700"></div>
The classes added to the div ensure that by default, the background color should be white. However, if dark mode is turned on on the website, it should change its color to a shade of Gray.
Bootstrap at the moment of writing this does not provide any utility classes to help make implementing dark mode in your website easier, so this is a big bonus for Tailwind CSS as it also saves you a lot of time.
Modern Feel
I've been using Bootstrap for many years now, and recently I started noticing that something about the design of components in Bootstrap feels outdated. Whether it's the colors or other design look and feel, it doesn't feel like it's adapting to changes of design pattern with time.
I really loved the colors that Tailwind CSS provides and how easy it is to customize them to get a bunch of other colors as well. Tailwind CSS provides a set of colors that you can use by default, but you can also change those colors easily from the configuration.
For example, when making the website, I found that Rose was better than the default Red. I was able to replace the shades of Red with the shades of Rose easily while still using the utility classes Tailwind CSS provides by just one line in the configuration:
//tailwind.config.js
red: colors.rose,
Using It With React
There are a lot of ways you can use Bootstrap with React. However, they can be a bit of a hassle. Usually, the library would create different React components that simulate Bootstrap components, and you have to import them to use them in your components.
Using Tailwind CSS with React is easy. You just need to make some changes in the configurations, then you can use the classes easily in your components.
The main difference here mostly relies on the fact that, as mentioned before, Bootstrap provides a lot of UI components rather than just utility classes. So, it's understandable why using it in React would be done this way. However, it felt much better to use Tailwind CSS with React, especially since you're constantly creating reusable components.
Conclusion
Both Bootstrap and Tailwind CSS have their own use cases that make them a better fit for a project. If you're unsure on which to use, assess what your priority is for your project and which option suits it better.