11 Benefits of Tailwind CSS

Published on

I’ve been using Tailwind CSS professionally almost every day for nearly two years. I love using it, and it’s made my development workflow so much better. So I wanted to share some of the benefits I’ve gained by using Tailwind over a traditional framework or custom CSS.

  1. Customization

Tailwind was built from the ground-up to be super customizable. It comes with a default configuration, but it’s straightforward to override the default configuration with a tailwind.config.js file in your project. Everything from colors to spacing sizes and fonts can be customized really easily using the config file. No more fighting the framework, trying to figure out which classes to override to get results you wanted.

Read more about customizing Tailwind here.

  1. Built-in Design System

Another benefit of the configuration file is that it gives you a design system to work from. In most cases, designs look better if you use consistent spacing, sizes, colors, etc. Since Tailwind allows you to configure all these values up front (or provides sane defaults), as long as you stick to using your Tailwind classes, you have a pretty good start on a design system.

  1. No Naming Things

One of the things I hate most about writing custom CSS is naming the classes. Which classes should be specific? Which classes should be more generic? How do you organize them all and make sure they cascade in the correct order? Tailwind solves all those problems by providing utility classes that can be used 99% of the time. The only time you’ll have to name things is when you extract a component, which is pretty rare for me.

  1. No Context Switching

One of the reasons Tailwind is so much faster to use is you barely ever have to switch contexts. Since the framework provides almost everything you need out of the box, you rarely leave your HTML (or other templating language) while building out a design. No more switching from HTML to CSS hundreds of times to get a design looking just right.

  1. Easy Onboarding

Since Tailwind provides all the naming and organization, it’s very consistent across projects. So if a developer is familiar with Tailwind at all, chances are they can jump into a new Tailwind project with very little trouble.

  1. Creating Components Is Easy

Although Tailwind is primarily a utility CSS framework, it makes creating custom components from combinations of those utilities really simple. In almost every project, I extract component classes for buttons and other form elements using the @apply directive. You can also use the theme() function inside your CSS files to get values from your config file like colors and spacing sizes instead of hard-coding them.

Read more about extracting components here.

  1. Development Speed

Because you don’t need to name things, you don’t have to switch context as much, and you’re not fighting the framework to make customizations, prototyping and implementing custom designs is really fast using Tailwind. Much faster than with most other CSS frameworks and definitely quicker than writing custom CSS. Tailwind provides almost all the tools you need to build out a site, so you rarely need to write any custom CSS. If you prefer having components like .btn and .panel, it’s really easy to create them yourself to use throughout your project.

  1. Responsive Everywhere

All of Tailwind’s utilities are generated with responsive versions that you can use to make your site look different on mobile, tablet, and desktop screen sizes. On top of that, it offers the @screen and @responsive directives to help generate custom classes that are responsive.

Read more about Tailwind’s responsiveness here.

  1. Small Size (after PurgeCss)

Initially, when you see the CSS file outputted by Tailwind, you might be shocked at the large file size (477.6kb unminified). Thankfully, there are a few things that can help reduce the file size tremendously.

One optimization you’ll likely get for free is Gzip or Brotli compression. Because of the way Tailwind is built, these compression algorithms reduce the file size more than usual. Most servers have one, or both enabled by default.

The second and most beneficial optimization is using PurgeCss. PurgeCss reduces the file size by scanning your HTML or other templates and removing any classes that aren’t used. Setting up PurgeCss to work with Tailwind is easy, so I highly recommend it before deploying your site.

After using Brotli and PurgeCss, in my experience, you can expect to have sub-10kb CSS files unless you’re adding a lot of custom CSS to your project.

Typically as a project grows, your CSS file grows as well. This is not the case when using Tailwind. Since you’re using a standardized set of classes, your CSS file will remain small throughout the life of a project.

Read more about controlling file size here.

  1. Cache Benefits

Using a traditional CSS framework or custom CSS, you’ll most likely need to make changes to your CSS file when making changes to your design. However, when using Tailwind, since you’re using the same classes over and over in your markup instead of changing your CSS file, you may not even have to bust your CSS cache to make small changes to your design. This means your users won’t have to redownload your CSS file as often.

  1. Confidence

When you’re using a traditional approach to CSS, making changes to the design of one page could affect another page if you’re not careful. Using Tailwind, any changes you make will be made in your templates, therefore only affecting the page you’re working on. This makes it much easier to change a single page without worrying about side effects you may be causing.

Conclusion

If these benefits sound like something you’re interested in, definitely give Tailwind a try. I recommend reading the docs and watching the Tailwind screencasts to get started.

If you’re already using Tailwind, let me know what you love or hate about it. I’d love to hear some feedback!