11 Benefits of Tailwind CSS

Published on by

11 Benefits of Tailwind CSS image

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!

Jason Beggs photo

TALL stack (Tailwind CSS, Alpine.js, Laravel, and Livewire) consultant and owner of roasted.dev.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

Visit DocuWriter.ai
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
Bacancy - Staff Augmentation logo

Bacancy - Staff Augmentation

Leave your web app development hustles to the leading IT Staff Augmentation Service Providers. Choose from an extensive pool of 1050+ developers and give yourself the sigh of success you deserve with Bacancy. Get In Touch Today!

Bacancy - Staff Augmentation
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Add Kanban Boards to Your Laravel App in Seconds image

Add Kanban Boards to Your Laravel App in Seconds

Read article
October CMS v3.6 Ships Today, Full of New Features image

October CMS v3.6 Ships Today, Full of New Features

Read article
Laracon EU Videos are now out image

Laracon EU Videos are now out

Read article
Use Google's Gemini AI in Laravel image

Use Google's Gemini AI in Laravel

Read article
PhpStorm is getting a brand new terminal image

PhpStorm is getting a brand new terminal

Read article
Six Essential Plugins for Visual Studio Code image

Six Essential Plugins for Visual Studio Code

Read article