Made in Builder

Made in Builder.io

Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

web development

The Tailwind CSS Drama Your Users Don't Care About

January 25, 2023

Written By Yoav Ganbar

What Tailwind is

If you’ve been doing web development in the past few years, there is almost no way that you haven’t heard about Tailwind.

But, in the slim chance that you haven’t, the TLDR; version is:

“A utility-first CSS framework packed with classes like flexpt-4text-center and rotate-90 that can be composed to build any design, directly in your markup.”

- Tailwind home page

Basically, Tailwind has classes for almost all CSS properties, plus a few more that combine a few properties.

Latest drama

Just like death and taxes are a certainty, so is web development Twitter drama. This time around it came back to Tailwind.

I’m not sure where or why this started, but there’s a lot of chirping around the blue little bird. Heck, you know a topic is hot when Fireship makes a video about it:

As the above video mentioned, it all started with this tweet by shadcn:

shadcn avatar
shadcn@shadcn
When dealing with
@tailwindcss classes, do you prefer everything in one line or do you break them by state using a utility like `clsx` or `classname`?
https://t.co/PESiDBV4yo
Tweet media

This brought all the TW haters and lovers out of the woodwork and lead to a lot of takes on both sides of the spectrum.

Taking the naysayers’ side Syntax.fm co-host, Scott Tolinski, retweeted the aforementioned tweet with his 🌶️ take:

Scott Tolinski - Syntax.fm - LevelUpTuts avatar
Scott Tolinski - Syntax.fm - LevelUpTuts@stolinski
At this point why not just write css.
https://t.co/H3RMONooMv
shadcn avatar
shadcn@shadcn
When dealing with
@tailwindcss classes, do you prefer everything in one line or do you break them by state using a utility like `clsx` or `classname`?
https://t.co/PESiDBV4yo
Tweet media

Why did this happen (again) now and what are the pros and cons of using Tailwind?

Let’s try to break it down.

I think Jeff Delaney’s (Fireship) video summarized it well with 4 problems with CSS and how Tailwind solves them.

The problems, the solutions, the good, and the bad

Separation

We’ve been told separation of concerns is important, so (generally) CSS lives in a different file than your HTML markup. To reference the style, we need to use a class name which means you have to name things, and that’s one of the hardest things in programming.

Even more difficult, is remembering what each class name does, and when you change anything it might break your whole UI.

Having to name stuff and coming up with arbitrary class names which are brittle to maintain is no bueno.

Pros:

  • While using Tailwind, you can see all of your styles right in your markup as classes that are human-readable. You can understand how something would potentially look. Colocation FTW!
  • You don’t have to name any classes.
  • You know what class affects which element.

Cons:

  • mixes the ol’ separation of concerns — styles with markup.
  • It bloats HTML markup and looks like inline styles === ugly.

Tip: if what bothers you in Tailwind is the “ugliness” inside your HTML, you can use the Inline Fold VScode extension.

Verbosity

an image of a person holding a really thick book with a text bubble saying is this any better.

CSS is very verbose, meaning you need to write a lot of characters to define each property. Also, there are things that might need a few properties to achieve something relatively simple. When you write pure CSS, you write a lot of code.

Pros:

  • Everything in Tailwind is just CSS. With extensions, you can just hover over a class and see the CSS styles.
  • Writing with Tailwind results in less code.
  • Clever naming conventions for classes that combine properties and/or long values. For example shadow maps to:

Cons:

  • You need to learn a new abstraction.
  • Requires tooling to use.

Too much power, no constraints

an image of an old man with the caption with great power comes great responsibility.

CSS is a powerful language (and yes, it’s a language — hold your drama 😜). It controls the way things look on a webpage. It is sometimes hard to reason about and maintain, and that is why CSS frameworks such as Bootstrap became so popular. However, most of them are a pain to customize.

Pros:

  • Infinitely customizable with solid defaults.
  • One Tailwind site/app can look completely different than another.
  • Easy to refactor.

Cons:

  • You need to wire up custom CSS that might not be mapped to a TW utility class.
  • Tailwind is a non-standard way to use CSS.

Zombie styles

Unused CSS can bloat up your website or app. There’s nothing to stop you from writing the same style properties in different classes or selectors. Styles that aren’t used are still shipped to the browser but have no effect, they just hang around your codebase like zombies 🧟‍♂️.

Pros:

  • Tailwind purges any styles (and zombies) that aren’t used.

Cons:

  • A few steps to set up the tools: CLI, PostCSS, extensions, etc.

The state of CSS in 2023

Love it or hate it, there’s no dispute that a lot of developers are using Tailwind, are happy with it, and know that it exists as we can tell from these images taken from the latest “State of CSS” survey:

A screenshot from the state of CSS survey showing retention for CSS frameworks with tailwind at the top with 79% in 2022.

The retention scores are in the high 70s, which can indicate the overall satisfaction devs have.

However, when it comes to interest, it seems like there’s a 50/50 split. This can perhaps shed some light on why Tailwind is a polarizing topic:

A screenshot from the state of CSS survey showing interest for CSS frameworks with tailwind at the top with 50% in 2022.

Usage is on the rise amongst a pretty large percentage, seconded to good ol’ Bootstrap:

A screenshot from the state of CSS survey showing usage of CSS frameworks with tailwind 2nd and at 46%.

The opposing camps

Both camps have strong feelings about their preference. I think it’s just one of those things that devs like to do — argue. But the arguments on either side have valid points.

To understand the two sides of the coin, I’d recommend reading these two pieces:

Here are some quotes

“Tailwind’s selling points are:

  • Not having to be moving through files.
  • The utils for media queries are better APIs.
  • Better than Emotion and like-minded CSS in JS solutions.”

- Manu Mtz.-Almeida

“One issue for me with Tailwind-like solutions is that they 'confuse' Utility-Classes with Design Tokens, and unnecessarily bind them together. Design Tokens are great, we should absolutely use them, and it's very(!) easy to do with CSS custom properties. Utility Classes are also great, and we should use them too - for utility purposes. Mapping tokens to classes goes against every basic CSS principle and is quite redundant once you're working with a good set of tokens and a few basic useful utility classes.”

- Amit Sheen

Best tweets and memes

The best part of this recurring feud was the tweets and memes. Some date back 2 years, and some are pretty recent. For the fun of it, let’s show them in chronological order:

Guillermo Rauch avatar
Guillermo Rauch@rauchg
The most successful technologies on the Web in recent years (
@reactjs,
@tailwindcss) started out being dismissed on the basis of syntax aversion¹ and not separating concerns² 😁

¹ "Get JSX / class spaghetti off my lawn"
² "I need separate files!"
🧁 Mark Dalgleish avatar
🧁 Mark Dalgleish@markdalgleish
I wish
@tailwindcss had a type-safe API like this. Autocompletion and type checking without editor plugins. Multi-line formatting with Prettier.

I realise this would be limited by static analysis, but I feel like a lot of people who don't like Tailwind would be swayed by this.
https://t.co/jAVX8j0Iia
Tweet media
Steven Tey avatar
Steven Tey@steventey
Tailwind is not just a tool.

It’s an ecosystem. It brings instant familiarity and a common language for everyone in front-end development.

These are my favorite resources to master
@tailwindcss:
ThePrimeagen avatar
ThePrimeagen@ThePrimeagen
i have built maybe 100 websites during my earlier years

during that time i have developed something like tailwind. descriptive class names to quickly build up

i think having a universal standard, tailwind, will do more for webdev than any other library out there

css sucks
Cory House avatar
Cory House@housecor
15 reasons I enjoy
@tailwindcss:

1. I don’t have to spend time naming classes.

2. I can jump into a project that uses it immediately.

3. The final CSS is automatically as small as possible. No unused styles are shipped to prod.

4. Fantastic docs.
Jason Miller 🦊⚛ avatar
Jason Miller 🦊⚛@_developit
I regret using Tailwind for this mastodon client. I had kinda assumed it'd make things like dark mode easier, but so far it has just made initially throwing a view together slightly quicker at the expense of making everything else much more arduous/brittle.

How I feel bout Tailwind

I am a fan. However, I wasn’t at first.

When I first encountered it, I kind of threw up in my mouth a bit. I couldn’t help but glaze over the long list of classes that sullied my HTML.

Nevertheless, after overcoming my initial disgust, I just gave it a go. It took me maybe 30 minutes of actually using Tailwind to get the feel and start falling in love with it.

It is almost the same process I had with Typescript. Once you get going the benefits become clear. The best experience I had was when I worked on a webpage that only had a desktop design. A few weeks later, as expected, there was a need to add responsiveness to said page. With the help of Tailwind, I was able to get it done in about 15 minutes.

That sealed the deal for me.

Final thoughts

It’s astounding to me how people love to defend their choices, and how some just love to hate. The scorching passion devs have is only reminiscent of what’s called in psychology “team identification”.

This is the extent to which a fan feels a psychological connection with a team and the team's performances are viewed as self-defining. It is also known as "basking in reflected glory", as a fan's self-esteem is raised when associating themselves with a successful team.

The debate is almost always binary — love/hate, hardly any middle ground.

The test of a first-rate intelligence is the ability to hold two opposed ideas in mind at the same time and still retain the ability to function. - F. Scott Fitzgerald

We should learn from Mr. Fitzgerald and try and hold these conflicting views in our minds when choosing a technology.

My conclusion is that there’s some sort of emotional facet to developers’ tech choices. They get attached and choose sides. I’ve even discussed it once on my podcast.

Jack Forge avatar
Jack Forge@TheJackForge
Your clients don't care if you use Tailwind or write custom CSS.

But yeah, don’t forget that your client, product manager, or CEO doesn’t care if you use Tailwind or not—after all, it’s just a tool. But it's also important to remember that the right tool can make a big difference. Tailwind, for example, is designed to be highly customizable and provide a range of features that can help you build better and more efficient products. So while it may not be the only tool you need, it can certainly be a valuable one.

Learning CSS, in my opinion, is by far much more important than knowing Tailwind. I believe that you have to have a strong foundation of the basics before you can even think about a CSS framework. Tailwind docs are pretty amazing and can help someone that has limited knowledge of CSS level up quite quickly, I’ve seen it happen. It’s all CSS when it comes down to it.

Tech and Twitter drama is not going away anytime soon, so when you come across it, just remember it’s all about people and opinions. They may help you, confuse you, upset you, make you mute a ton of accounts, or even downright just be pure entertainment to you.

I like to think that It’s important to have strong opinions but loosely held ones.

At the end of the day, just remember that the decision to use a certain tool is up to you and your team. Your users don't care whether you choose Tailwind or whatever, as long as the product works for them. That being said, Tailwind can be a powerful tool at your disposal, as long as you are willing to invest the time to learn how to use it. Ultimately, the choice is yours.

If you like it, use it. If you don’t, don’t use it.

What do you think? Want to keep this conversation going? Hit me up on Twitter.

Visually build with your components

Builder.io is a Visual CMS that let's you drag and drop to create content on your site visually, using your components.

Stop drowning in a backlog of requests - build with your whole team instead.

Try it out
Learn more


Share

Twitter
LinkedIn
Facebook

Continue Reading
Web Performance14 MIN
Optimal Images in HTML
WRITTEN BYSteve Sewell
January 26, 2023
Web Development9 MIN
Fast and Light Relative Time Strings in JS
WRITTEN BYSteve Sewell
January 24, 2023
testing7 MIN
End-to-End Testing With Playwright And Github Actions
WRITTEN BYAdam Bradley
December 1, 2022

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

PRODUCT

Features

Pricing

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

INTEGRATIONS

React

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

Shopify

All Integrations

Security

Privacy Policy

Terms of Service

By clicking “Subscribe”, I agree to Builder.io's Terms of Service and Privacy Policy.