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 designtotailwind.com.

Cube

Laravel Newsletter

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

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
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

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
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Multi-tenant Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Rector logo

Rector

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

Rector
MongoDB logo

MongoDB

Enhance your PHP applications with the powerful integration of MongoDB and Laravel, empowering developers to build applications with ease and efficiency. Support transactional, search, analytics and mobile use cases while using the familiar Eloquent APIs. Discover how MongoDB's flexible, modern database can transform your Laravel applications.

MongoDB

The latest

View all →
The Inertia.js v2 Beta is Here image

The Inertia.js v2 Beta is Here

Read article
Mastering Laravel, No Compromises, and SourceDive with Joel Clermont image

Mastering Laravel, No Compromises, and SourceDive with Joel Clermont

Read article
Now you can install PHP and the Laravel installer with a single command image

Now you can install PHP and the Laravel installer with a single command

Read article
WireSpy is a Sleek New Debug Bar for Laravel Livewire image

WireSpy is a Sleek New Debug Bar for Laravel Livewire

Read article
The Laracon AU schedule is now live image

The Laracon AU schedule is now live

Read article
Supercharge PhpStorm with Laravel Idea image

Supercharge PhpStorm with Laravel Idea

Read article