Tailwind CSS vs. CSS: An in-depth comparison (speed, file size, etc.)

Do you want to know if using Tailwind CSS will improve your workflow, or if it is just another framework? This post will compare Tailwind CSS vs. CSS by building one website with both technologies, so you can make an informed decision on using Tailwind CSS or not.

Introduction

In the following comparison, we will have a look at three categories. The categories are the time needed to complete the website, the total characters needed, including HTML and CSS, and finally, the total file sizes of HTML and CSS.

To collect the data presented in this post, I created one website, once with CSS and once with Tailwind CSS. In addition, I changed the font to a mono font for the Tailwind CSS version. One important thing to note is that I had a one-week break between building both websites so that I did not distort the collected data by knowing exactly how to construct the website.

Both websites were developed as themes for my Tool: Easy Portfolio, and you can find a guide on how to build them in my blog (CSS and Tailwind CSS).

In the following sections, you can see the results for the different categories. The data represents CSS vs. Tailwind CSS.

Time needed

The time needed for building a complete website is an important category because the faster you can build a website, the faster you can focus on other important topics! One premise of Tailwind CSS is that it is a CSS Framework that allows you to build your websites rapidly. So let’s see if it is faster than CSS.

Need help or want to share feedback? Join my discord community!

As we can see, they hold what they say. For me working with Tailwind CSS was 35% faster to build than CSS. It’s also remarkable that such a time reduction was possible for such a small website.

Written Characters

The next category is how much you have to write to achieve the same results. For that, I counted the characters I had to write, inside both the HTML and the CSS File.

If this guide is helpful to you and you like what I do, please support me with a coffee!

As we can see, Tailwind has more characters in the HTML but way less in the CSS. This fits together with the premise of Tailwind CSS to move the development work from CSS to the Markup.

File sizes

Lastly, the file sizes. The lower the file size, the faster the load time of your website. So let’s see if Tailwind is better than CSS in this field too.

As we can see in this category, CSS wins over Tailwind CSS with a total of 4KB. That’s a lot! That is because we have a lot of Boilerplate in the CSS File when using Tailwind CSS. We have to keep in mind that the bigger the website gets, the smaller the difference gets.

Overall Opinion

In this section, I will detail how the process of working with both technologies felt to me.

Both CSS and Tailwind CSS have a pretty straightforward process to work with. I think both are valid methods to build websites, but for me, the problem with CSS is that I have to think of good class names and that I also have to switch between two different files. These problems slow down working with CSS, and Tailwind CSS tackled exactly this problem. The cool thing was, I felt that while working with it, writing everything in the markdown was a breeze to work with, especially with such a small website.

Another thing that I have to name is that I think that it is much easier to create responsive websites with Tailwind CSS. This is because the Mobile-First Approach and the preconfigured breakpoints are pretty good constraints that make sense when working with them.

Overall I liked the result created with both technologies. Keep in mind, this is my personal opinion, and it could be completely different for you 🙂

If you have some points I did not think about, you can contact me through the chat bubble in the bottom right, or you can send me a DM on Twitter 🙂

In case you liked this post consider subscribing to my Newsletter. I will send one E-Mail at the end of each month containing a list of all the posts written this month.

[convertkit form=2303042]