How to decide if TailwindCSS is right for your project

5 min readJun 4, 2022

It’s been more than 2years since tailwindcss came out and it’s one of the hottest CSS frameworks out there. I personally love tailwindcss but it’s not all fun and games. You should consider the following key points before you add tailwind to your next project.

The Good

1. Superspeed your development

Once you get a hang of tailwindcss, you can save a ton of development time. Let me give you an example -

Let’s say we want a div to fill up all the available space and place its items in the center -

Traditionally you’ll write it as -

HTML -
<div class="center-container"> This will be in the center </div>
CSS -
.center-container {
  display: flex;
  justify-contents: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

With tailwind CSS, we can instead write -

<div class="flex justify-center items-center w-full h-full"> 
	This will be in the center 
</div>

No need to jump to the style file for writing classes
We wrote much less code

Here’s the calculation I did for one of my projects at Nvidia -

Just the style — display: flex; has been written 2007 times in the code, that's 26,091 key stories + the class names written in HTML and style files.
With tailwindcss, that becomes just flex and only has to be written in the HTML file. That's just 8,028 keystrokes, a saving of 18,067 keystrokes without counting the class names.
Taking an average typing speed of 70WPM, that’s about ~260mins of typing display:; without counting the class names plus jumping from HTML to SCSS file.
All that time saved just from display: flex;

2. Doesn’t load up your build size

tailwindcss is a utility-first CSS framework and doesn’t load up your final build like other frameworks like MaterialUI. It doesn’t come with any pre-built components or themes.
On top of that, you can purge tailwind and that removes all the un-used CSS classes from tailwindcss in your production build.

3. Easy to configure

You can easily configure tailwindcss by adding tailwind.config.js file inside your project. Here you can add all your custom sizes, colors, prefixes, etc, and then you can use them as classes.

module.exports = {
  prefix: 'tw-', // this will make all your tailwind classes start with prefix tw-
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {  
// better to extend, but you can also overwrite the base classes by 
// putting spacing, borderRadius, and fontSize right inside theme
      spacing: {
        xxl: '4rem' // this will create custom classes for margin, padding, height.. etc
      },
      borderRadius: {
        xxl: '4rem' // tw-rounded-xxl, tw-rounded-lt-xxl
      },
      fontSize: {
       xxl: '4rem' // text-xxl
      }
    },
  },
  plugins: [],
};

4. Awesome extension for VS code

Tailwindcss Intellisense works like a charm and also works with the prefixes and your custom style classes. If you decide to add tailwindcss to your project, I one hundred percent recommend this VS code extension for you.

5. Mobile first

tailwindcss is designed as a mobile-first CSS utility framework. It arms you with a lot of power to fluidly write mobile-friendly designs without having to write custom media queries. Ain’t that just fantastic?

The Bad

1. Separation of concerns

By using tailwindcss, you end up writing CSS in your HTML files. Aka merging your presentation layer (CSS) with your structure (HTML). This is not good in the long term and might make your code harder to read and maintain.

2. It’s not verbose, it’s noisy

Look at the code below and tell me which one would you prefer?

Tailwind implementation of a simple button -

<button
    type="button"
    class="flex flex-row justify-center items-center my-5 rounded-full cursor-pointer bg-[#2952e3] py-2 hover:bg-[#2546bd]"
>
   <p className="text-white text-base font-semibold">Click me</p>
</button>

Simple button using HTML and CSS -

<button type="button" class="primary-button">
	<p class="primary-button-text"> Click me</p>
<button>

Now think about your big components and how they’ll look. We all say that we want to write small components but that’s not always possible.

Plus add you’re custom CSS classes to it, and it’ll be too noisy to maintain. You can however add a prefix to all the tailwind classes to make sure you know which classes are coming from tailwindcss and which are not.

3. It’s not a replacement for CSS

If you aren’t good with CSS in the first place, tailwind won’t magically help in bringing your designs to life. I would recommend that you first learn CSS. You need to be at least a decent or a pro in CSS before you start playing around with tailwind.

Conclusion

Now that you’ve gone through all the advantages and disadvantages of tailwindcss, I hope making a decision to use it in your current or next project becomes much easier.

I would say if you’re project is on react or vue, and the majority of devs have a stronghold on CSS, the benefits of tailwind overweight the pitfalls.

On the other hand, if you’re gonna be using Angular, or most of your devs are still learning CSS, or the project might move a lot of hands in the future, it’s better to hold off tailwindcss.

Still, the decision to choose it or not remains to be answered on a project to protect bases. I personally love it and use it for all my personal projects.

About the author
Srijan Gulati
Senior Software developer @Nvidia