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.

image
Laravel Idea

Ultimate PhpStorm plugin for Laravel developers, delivering lightning-fast code completion, intelligent navigation, and powerful generation tools to supercharge productivity.

Visit Laravel Idea
Curotec logo

Curotec

World class Laravel experts with GenAI dev skills. LATAM-based, embedded engineers that ship fast, communicate clearly, and elevate your product. No bloat, no BS.

Curotec
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
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
Cut PHP Code Review Time & Bugs into Half with CodeRabbit logo

Cut PHP Code Review Time & Bugs into Half with CodeRabbit

CodeRabbit is an AI-powered code review tool that specializes in PHP and Laravel, running PHPStan and offering automated PR analysis, security checks, and custom review features while remaining free for open-source projects.

Cut PHP Code Review Time & Bugs into Half with CodeRabbit
Join the Mastering Laravel community logo

Join the Mastering Laravel community

Connect with experienced developers in a friendly, noise-free environment. Get insights, share ideas, and find support for your coding challenges. Join us today and elevate your Laravel skills!

Join the Mastering Laravel community
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
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
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 →
Enhance Validation Testing Precision with Laravel's assertOnlyJsonValidationErrors image

Enhance Validation Testing Precision with Laravel's assertOnlyJsonValidationErrors

Read article
Generate HTTP Fixtures from Live API Calls in Laravel image

Generate HTTP Fixtures from Live API Calls in Laravel

Read article
Confidently Extract Single Array Items with Laravel's Arr::sole() Method image

Confidently Extract Single Array Items with Laravel's Arr::sole() Method

Read article
Safely Retry API calls in Laravel image

Safely Retry API calls in Laravel

Read article
Laravel's AsHtmlString Cast for Elegant HTML Attribute Management image

Laravel's AsHtmlString Cast for Elegant HTML Attribute Management

Read article
NativePHP for Mobile v1 — Launching May 2 image

NativePHP for Mobile v1 — Launching May 2

Read article