How to convince your boss to use Tailwind CSS

If you can get people to dip their toes in the water hopefully they'll dive right in.

Tailwind can be quite divisive in the development community, there are hardcore fans and trigger-happy haters.
However, there are many testimonials of people who were initially put off by the syntax or the functionalities until they tried it.

I didn't think I was going to like @tailwindcss... spent a day using it for a POC, love it! I wish this had been around when we started our company design system, seriously considering a complete rebuild 😂

Jon Bloomer

The best way to introduce your boss or your coworkers to Tailwind probably isn't by presenting it as a CSS framework.
It's something more low-level, that allows you to get into the nitty-gritty details.

Tailwind is not a CSS framework, it's an API for your design system.

Customization 🎨

Traditional CSS frameworks hand you a series of classes, and sometimes components, with a predefined style.
If you have a custom design you are often required to override some of the default styles and systems.
It's tedious, takes time, and adds bloat to your production code.

To get up and running quickly Tailwind comes with great default styles right out of the box, created from the ground up by their design team.
What's more interesting though is that it's fully customizable, which means that you can have your custom styles without adding any unnecessary code to your stylesheet.

Tailwind produces lean production code with no time wasted overriding default styles.

A great example of a custom Tailwind setup is the Borderlands video game website.

Performance 🏎

The streamlined production code produced by Tailwind is amazing for performance, on average it's only 10kb!

It has been proven that fast websites have a lower bounce rate, therefore leading to higher user conversion.
This makes sense because the shorter the loading time, the sooner the user can get to what they're looking for.

This article on web.dev has some great examples.

Tailwind is great for end-user performance, giving you ultra-fast CSS effortlessly and helping you attract more users.

Portability 🎒

There is an infinite number of different development stacks possible and it can be difficult to make all the pieces fit.
Luckily, Tailwind is front-end agnostic, so no matter what you're working with it will blend right in.

If your company decides to refactor from one stack to another you can take your design system with you, no questions asked.
Everything you need is in the configuration file.

Tailwind is extremely flexible and can adapt to any web development environment.

Productivity 📈

Developer experience and development speed are important factors when choosing your tools.
The productivity benefits with Tailwind are not to be taken lightly and can noticeably speed up your workflow.

Context switching 🧠

Something that gets overlooked when writing HTML/CSS is the need to switch contexts.
Your brain is constantly shifting gears to accommodate for the task at hand between the different languages and files.
This can feel sluggish and sometimes a little overwhelming if you have many documents open at once.

With Tailwind you declaratively write CSS in your HTML, which allows you to apply your styles while staying focused.
Utility classes in your HTML also make reading code a breeze now that the structure and styles can be found in the same place.

This approach allows developers to be more productive and accumulate less fatigue with a smoother development experience.

Naming things 🤔

How often have you seen class names like .sidebar-container-wrapper-left in a project?
It adds no real value to the structure of the page and gives no clue how it should look.
This can lead to bugs as its purpose and scope are unclear.

There are only two hard things in Computer Science: cache invalidation and naming things.

Phil Karlton

As developers, we probably spend more time thinking of class names than applying the styles themselves.
This is rarely time well spent however, Tailwind relieves this burden by supplying tons of utility classes using intuitive naming conventions.

You and your team will follow the same rules, allowing for more focus and uniformity across your codebase.

You can stop wasting time thinking of meaningless class names and focus on the real issues.

Maintenance 🚧

Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex grid etc but just quicker to write and maintain.

Debbie O'Brien

Onboarding 🚢

The uniform class names that Tailwind provides allow for speedy maintainer onboarding.
This can be especially useful in large companies where developers may come and go regularly.
A custom CSS system will require a varying amount of time to learn and reproduce.

Little time is wasted onboarding new developers thanks to Tailwind's naming conventions and classes.

CSS that scales ⚖️

An issue that often surfaces is the endlessly growing CSS file: existing classes aren't modified out of fear of breaking something, so new classes are added.
This is bad practice and can cause considerable technical debt, as well as slowing down your site.

Tailwind allows your CSS to scale without becoming some uncontrollable monster.
You will most likely be using the same values over and over again if your design is consistent, meaning your CSS file will grow very little over time.

Your CSS file will grow very little over time no matter the size of the project.

Ecosystem 🌱

The team behind Tailwind has also created an array of tools to help you build your applications.

• Tailwind UI

  A premium library of professionally designed, fully responsive components built with Tailwind CSS. There are over 400 examples that range from inputs and buttons to landing pages and dashboards.

• Headless UI

  A collection of unstyled and fully accessible components that integrate perfectly with Tailwind CSS, built with React and Vue. They bring the interactivity and you bring the styles.

Incremental adoption 👷‍♂️

If your superior is on the fence about trying Tailwind in a major project, another advantage is that it's possible to integrate progressively.
There is no need to put your project on hold while you migrate all of your CSS.
As you're not required to load all of the utility classes ahead of time, you can dedicate a CSS file just to Tailwind classes, and then use it as necessary.

You can gradually incorporate it into your system, in new components, or through refactoring old ones.

A little extra 🎁

Here are some final points that may just be the cherry on top to win over your boss or colleagues:

• Documentation

  The documentation is awesome, using integrated search for rapid browsing along with clear and precise examples. You'll find everything you need.

• Community

  The community is heavily invested and is constantly growing. On the Tailwind Discord there is always someone to answer any questions you may have, sometimes even the creators themselves.

• Plugins

  The plugin ecosystem is alive and booming, if there is some edge case that is not handled by Tailwind natively, chances are someone has made a plugin already.

So what's the score boss? 👀

You may not need all of these examples to convince your boss or your peers but hopefully, this will give you some ammunition.
Tailwind is a great tool to add to your team's front-end toolbox, if they try it the framework should take care of the rest.
Good luck!

Further resources 📖

• Tailwind Talk: How do you convince your boss to use Tailwind CSS? With Debbie O'Brien
• From semantic CSS to Tailwind - Refactoring the Netlify UI codebase
• Why Tailwind CSS
• CSS Utility Classes and "Separation of Concerns"

Have you tried to convince your boss or coworkers? How did it go?

Let me know on Twitter! 👋