DEV Community

loading...
Cover image for I Recreated a Bootstrap Website with Tailwind CSS, And Here Are The Differences

I Recreated a Bootstrap Website with Tailwind CSS, And Here Are The Differences

shahednasser profile image Shahed Nasser Originally published at blog.shahednasser.com ・5 min read

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:

Old

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:

New

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (8)

pic
Editor guide
Collapse
atulcodex profile image
Atul Prajapati

It's beautiful :)

Collapse
rangercoder99 profile image
RangerCoder99

Now try rebuild it without any framework!

Collapse
shahednasser profile image
Shahed Nasser Author

I already know enough CSS to do that, but why spend time on that when there are frameworks or libraries that can make it easier and make your development faster? What’s the point of styling a navigation bar everytime you have to create a websire? Same thing for other components that are common in any website. It’s not wrong to use a tool that will save you time on the easy to do stuff so that you can focus on something more important

Collapse
alevosia profile image
Ålex

Why not go devolve further and build websites with assembly!

Collapse
rangercoder99 profile image
RangerCoder99 • Edited

Its not devolving its just using the tools you got without adding any overhead with frameworks, tailwind is Basicly one class/css rule leading to bigger html files making changes to the style requires you to edit the html file and find it in a long line of classes having on top of that the responsive tailwind short that make you repeat a lot of that classes default use lead to a huge mess and didn't even mention the extra build time, look like we kinda gone back to inline styles...

Thread Thread
shahednasser profile image
Shahed Nasser Author

I understand your opinion about the huge mess because that’s what I thought too when I first used it. To be honest, I wouldn’t use Tailwind for HTML projects, as it is made to be used for reusable components. With React it’s much easier to use Tailwind and making the changes to styles becomes easier as well, as you know where each component is and you can easily make changes by changing the classes, without having to do it with CSS. In this case I think when you try it it’s a good choice, and the build time is pretty much the same with building react anyway.

I guess it depends on finding the best solution based on what kind of project you have.

Collapse
shahednasser profile image
Shahed Nasser Author

Sounds like a nightmare

Thread Thread
xufyan23 profile image
Sufyan Shahid

I recently switch to tailwind the weirdest thing I felt you need to add so many clasess to the built layout :/ especially when you are not used to such kind of layout.