DEV Community

Kerry Boyko
Kerry Boyko

Posted on • Edited on

TailwindCSS: Adds complexity, does nothing.

If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes".

And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas.

Before we start, let me try to explain what a utility class is. Let's say that you have many components, and many of them need to have the CSS style property: "display: flex;". Instead of writing that over and over in your css, multiple times, instead you create a class called "flex"

.flex {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Then, in every component that needs to be flexed, you add that "flex" class.

This is not a bad thing. I have written, and used utility classes a great deal myself, especially when I'm writing CSS without the aid of CSS-in-JS solutions or a preprocessor like Sass/SCSS.

What Tailwind does is take that concept to the extreme, with the idea being that you almost never have to write CSS, you just write different classes based on what styles you need to apply.

Which is an interesting choice, because...

This is just inline styles with extra steps

This is just inline styles with extra steps.

That's it. Writing <div class="flex">foo</div> has the same exact effect as writing <div style="display: flex;">foo</div>. Well -- slightly different in that inline styles have higher priority than classes, but that's not really relevant in this context.

So - with that in mind, with the exception of CSS prioritization, any argument you could make against using inline styles in your codebase is also an argument against using Tailwind. For example: Lifewire: Avoiding Inline Styles for CSS Design. Or StackOverflow: What's so bad about inline CSS?. Or LogRocket: Why you shouldn’t use inline styling in production React apps.

I know it seems a bit lazy to rehash other users criticisms of inline styles to explain what's wrong with Tailwind, but it really is a 1-to-1 mapping. It's just inline styles with extra steps.

Some of the problems Tailwind shares with inline styles:

It's WET, not DRY.

When you want to change your site styling in a major way, if you've used utility classes, you need to go through each use of those utility classes - that is, every component - and visually determine what needs to be updated. For example, let's say that your company's primary color is blue. You'll have lots of blue stuff in your website, marked with things like: "text-blue-500" or "bg-blue-300" to determine different shades of blue. And that's fine until your company decides to rebrand, and all of the buttons - but only the buttons - on the site need to be red.

Now you have to go through each component and manually change "text-blue-500" to "text-red-500". And with 1000 edits comes 1000 oppertunities to introduce a bug. It is almost a textbook definition of why the DRY principle is in place.

Alternatively, if you're using regular-old CSS, what you probably did is create a class called ".button". You can just go into that class and change a single line: "background-color: 'red';". Any element that uses that class definition will now be red.

That brings us to the next point:

HTML should only concern itself with the structure of your page, not the styling of the page.

People talk about seperation of concerns a lot in development. CSS Modules (and especially .vue files) have done a lot to dispel the notion that you need to segregate structure, behavior, and style of the same basic building block of your site in seperate folders, but there is something to be said for seperating concerns. That is - each part of your code should be "loosely coupled and highly cohesive."

In other words, your HTML (structure syntax) shouldn't have information about what the styles should be, it should only contain information about the structure of the page.

Indeed, the ultimate reason for the invention of CSS, the whole point of the entire enterprise of CSS... was specifically so that you could seperate content from presentation.

And the method for doing this is through the "class" attribute.

The whole point of "class" is specifically that you can tell the computer what an element is - that is, describe an element's content. Once you've defined the content, then you just need to decide what content of that type should look like.

This not only means that you can go and change how an element looks without worrying about the underlying structure of the page, but also means that you can use these classes to describe what an element is. Indeed, part of the reason for BEM's naming syntax is that BEM names not only tell you what the component is, but also what it's relationship to other components in the document is.

Remember that when we write code, we write it for two audiences: the first is the computer itself, which doesn't care how the code looks so long as it runs, and the other is your fellow programmers. The easier it is for them to quickly identify what parts of your program are and how they interrelate, the more quickly that they can fix bugs, add features, and bring value to the organization.

Which brings us to:

It's hard to read

If you look at some HTML with Tailwind in it, you might say to yourself that the HTML looks "busy" or even "ugly." That's true, but it's missing the point.

Say what you will about inline styles, but they're at least providing enough context to let you know what's happening. Tailwind code is full of semantically obscure abbreviations; most of which are just redefinitions of already well known CSS properties.

Worse still, when they're not redefinitions, they can become downright cryptic. Tailwind prefers to use prefixed class names instead of media queries. Here's an example from Aleksandr Hovhannisyan

So this in Tailwind:

<div
  class="w-16 h-16 rounded text-white bg-black py-1 px-2 m-1 text-sm md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg"
>
  Yikes.
</div>

Enter fullscreen mode Exit fullscreen mode

could be expressed as:

<style>
.thing {
  width: 16px;
  height: 16px;
  color: white;
  background-color: black;
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media screen and (min-width: 768px) {
  .thing {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .thing {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

</style>
<div class="thing">Yikes.</div>
Enter fullscreen mode Exit fullscreen mode

Now, the first example, I grant, is an awful lot less code to write, but look at how the second example is explictly defining height and width at specific breakpoints.

It is verbose - as raw CSS usually happens to be, but there are other solutions - such as Sass/SCSS, or solutions such as Emotion, Styled Components, etc. which allow you to use much more terse syntax without losing the cohesive meaning behind it.

Again, this is programmer 101. It's why senior developers get on junior developers for naming variables "const h = 10" instead of "const height = 10"

Another reason why the latter is easier to read than the former - Tailwind's classes are arranged horizontally, while the CSS is written vertically. The wider text is, the harder it is for a reader's eyes to jump to the next line, and the harder it is to find the one particular word you're looking for in a wall of horizontal text.

I bet your eyes started glazing over the second you saw the horizontal scroll bar on that Tailwind code sample, didn't they?

You lose a lot of the features built into standard CSS

I won't harp on this too much, but it should be pointed out that because Tailwind doesn't allow you to use the power of many of CSS's basic features. You can't chain selectors together, like so:

.foo:focus,
.foo:active,
.foo:hover {
  /* css code */
}
Enter fullscreen mode Exit fullscreen mode

You can't use combinators.

.foo p {
  /* all p that are decendants of a .foo */
}
.foo > p {
  /* all p that are direct children of a .foo */
}
.foo + p {
  /* all p that are directly -after- a .foo */
}
.foo ~ p {
  /* all p that are siblings of a .foo */
}
Enter fullscreen mode Exit fullscreen mode

It solves a problem that doesn't exist.

One of the craziest things is that there's an obvious limitation to Tailwind's utility-class paradigm. What happens if you want to group related styles together? Rarely is "display:flex;" used without "justify-content: {value}", for example. CSS allows you to group these styles together into (wait for it), classes.

There's a tool for grouping related Tailwind classes together too. It's called @apply. It's special, non-standard syntax that goes in your CSS file (a directive) and allows you to string together a collection of tailwind classes and place them all under one class name.

That is to say, completely defeating the purpose behind the utility-class paradigm. If you end up having to use @apply, then *why don't you just use normal, ordinary, conventional CSS, which is easier to read, understand, modify, and doesn't require special tooling or parsing. CSS syntax can be complex, but it's been pretty stable since the late 90s, and isn't going to radically change anytime soon.

There's a very simple mental experiment I'd like to conduct with you.

Imagine a world in which CSS was never developed, but something akin to Tailwind was. That is, webpages could only be styled through repeating these individual class names... presumably through using table tags for layout. (To give you an idea of how old I am, I used to code web pages as a summer job in my junior year of high school in 1996 - and we used a LOT of table tags.)

If you could go from the limitations of Tailwind to CSS, wouldn't you consider that a quantum leap forward? Expressive syntax! Semantic naming! Style grouping! Selectors and combinators!. It would be like moving from Assembly to C for the first time. If so, why are we considering replacing CSS with something that does less, is more complex, creates bad quality codebases, and possibly ends up with massive vendor-lock in down the line?

If you want better than CSS, there are already solutions.

So a lot of the hype around Tailwind is that you can get rid of CSS. I know, everyone knows CSS can be hard to work with - especially if you have legacy codebases where the CSS wasn't written that well.

But for the most part, there are other, better improvements on CSS that actually do make styling simpler. There's the various CSS-in-JS solutions that allow you to leverage the power of Javascript to create dynamic class definitions; there's preprocessers such as Sass/SCSS/LESS; there's linters like Stylelint; there's best-practices methods like BEM/SMACSS. Is there overhead in learning these technologies? Yes. Is there tooling that needs to be part of your build chain? Yes. But unlike Tailwind, all of these solutions actively provide a tangible benefit to your code -- which is something that Tailwind can't claim.

It literally provides no value, and tons of problems.

At the end of the day, what do you get for all these problems? What are you left with? You're basically left with a less readable, more complex version of inline styles, a coding technique that we've been trying to breed out of junior developers for the past decade or so.

If you adopt Tailwind, it's going to provide problems for you and your team for years to come, and it's going to be hard to remove it.


Updates based on the comments section.

A few notes based on responses from the comments section.

Why trash something if you don't like it?

It's important to write about bad frameworks as much as it is to write about good ones, because of two reasons.

First, is the John Stewart Mill argument of "the value of the wrongful idea" - that in making a (good faith) argument for something incorrect, one arrives at a more correct, more complete view by analysis and refutation. Ideas must be continually challenged lest they go stale. Indeed - "one who doesn't understand one's opponent's arguments does not understand one's own" is a maxim I try to apply. When I wrote this article, I tried to look for the good in Tailwind. Why do people like it? (They don't have to write css. They can put style info in their HTML. They can write terser code. It gives them power to do things they don't know how to do in css.) Once I knew why people liked it, I had a much better understanding of why I didn't. (It combines content and presentation. It makes things harder to maintain. The syntax is obscure. You lose the power to do things that you can do in css.)

Second is that someone down the line is going to think: Hmm, should I add Tailwind to my app that has to be maintained by my team? And they're going to google "pros and cons of TailwindCSS". There will be plenty of articles explaining the pros. Here's one explaining the cons. Hopefully I've made a compelling argument not to use Tailwind so that future developers won't have to deal with it.

You're being disrespectful to the people who like Tailwind.

This isn't New Orleans Jazz.

I don't like New Orleans Jazz, so I don't have to listen to it. I don't buy New Orleans Jazz albums.

I am not in the habit of making detailed criticisms of what I feel to be the music compositional problems of New Orleans Jazz.

But I have never had a team lead, product owner, or stakeholder come up to me and say: "For the next project, I'm thinking that everyone on the team has to learn how to appreciate and play New Orleans Jazz."

Engineers and developers are often required to work with technology that they not only don't like, but which makes their work harder - often because decision makers either didn't care about the software's tradeoffs, or didn't know. Can't do much about the former, but we can do things about the latter.

When team leaders are thinking about incorporating a new technology into their tech stack, they should look for blog posts like this one to help them evaluate whether or not it's worth a try.

My thesis is not, as you seem to think, "I don't like Tailwind, and therefore YOU shouldn't like Tailwind either". That's a 12 year old's viewpoint of technology criticism.

Rather my thesis is: "If you choose Tailwind for a mission critical application, you will end up making your job harder, your application more brittle, and your team, in the long-term, will suffer."

But CSS has massive problems!

It really does. And there are better solutions than plain CSS. But Tailwind isn't one of them.

Say that in the 1990s, the only way to build a house was to bang nails in with a flat rock (CSS). And then, around the mid 2000s, a really smart guy invented "the hammer." (SCSS) It took adjusting, and you have to learn a new tool, but it did the job much better.

Around the early to mid 2010s, another guy invented the nail gun (CSS-in-JS). It did a lot of the same stuff as a hammer, but you had to know how to use it. There were tradeoffs, but generally, people who chose to work with hammers or with nail-guns usually ended up okay. Many peoplee would often use a manual hammer when the manual hammer seemed appropriate, and the nail gun when they seemed to need it. And all was good in the world of carpentry.

Then in 2017, someone came up to the carpenters and said: "Hey, see what happens when I do this!" and starts hammering in nails with the butt end of a loaded revolver (Tailwind).

And it's supporters quickly point out how more effective it is at building houses than banging in rocks.

"But it's a loaded gun. It might go off and shoot someone"
"Hasn't happened to me yet."
"Why don't you use a hammer? Or a nail gun?"
"I don't like hammers or nail guns."
"I can understand why you might not, but even if you used a rock, that would be safer in the long run."
"But using a rock is so difficult and inefficient."
"I'm not saying to use a rock. I'm saying that the hammer already solves the problems you have with the rock, but even the rock is a better tool for this than a loaded gun because it won't shoot anyone."
"But I love my gun."
"I guess it's alright if you use your gun on smaller projects on your own property, but..."
"Nope, I'm the foreman. Everyone on the site is using loaded guns from now on, because they're awesome."


Update: 9 May 2021 - Check out this blog post by Mykolas Mankevicius which attempts to rebut this article. I disagree, of course, but I think it adds to the debate, and if you're reading this deciding whether to use tailwind or not, you should hear what the "other side" of this issue has to say.

Agree but think my writing style might be too abrasive? Check out Benoît Rouleau's take on this article entitled Tailwind CSS might not be for you

Cher writes about some of the response this article has gotten and how it relates to our own unconcious bias in "Sexism, Racism, Toxic Positivity, and TailwindCSS"

Oldest comments (255)

Collapse
 
fatrex profile image
Daniele Lenares

Interesting article, a different view about the css "star" of this moment.

However, let me do briefly the devil's advocate.
For example, to avoid classes pollution and the "style inline" effect you can use the @apply directive.
tailwindcss.com/docs/functions-and...
So you can leverage the simplicity of tailwind without polluting your code.

Collapse
 
kerryboyko profile image
Kerry Boyko

I briefly touch on the @apply directive in the article.

The thing about @apply is that you have this utility-class library that doesn't use semantic classes. @apply is then created to convert your utility-classes into something you can use in your semantic class.

Why not just write the semantic class in normal CSS and cut out the middleman. It's easier to read, more expressive, more powerful, and you don't have to learn a whole new syntax.

There is one particular case where @apply might be of use - and that's if a programmer knows Tailwind but doesn't know basic CSS... in which case I would not consider that programmer qualified to professionally write front-ends.

Collapse
 
alex_layne_3bbfe310a34ac7 profile image
Alex Layne

Because you can use variants defined in your Tailwind config and change them all just by changing the config. Duh. Your condescension is unearned when you couldn’t even figure that out.

Collapse
 
jdhillen profile image
J.D. Hillen

The Rick & Morty meme really brought it home. Peace Among Worlds Tailwind 🖕

Collapse
 
kerryboyko profile image
Kerry Boyko

F**k you! (It means "Much obliged.")

Collapse
 
alex_layne_3bbfe310a34ac7 profile image
Alex Layne

As a fan of Rick and Morty, I totally understand why people view fans of the show as insufferable douchebags. Case in point here.

Collapse
 
quasipickle profile image
Dylan Anderson

A bold article to write seeing as how it seems Tailwind is the starchild of CSS these days. But, an article I think needed to be written. I share most of your views on Tailwind.

I even tried to start a project from scratch using Tailwind because I thought "it's really popular and it looks really pretty - maybe I just need to buckle down and use it". It took me a few days until I came to your same conclusion - why don't I just use plain CSS (or in my case, SASS since I was already using it)?

It seemed silly to write:

.button{
    @apply px-4 py-2 rounded-lg
}
Enter fullscreen mode Exit fullscreen mode

when that's basically the same as:

.button{
    padding: $padding-lg padding-md
    border-radius: $border-radius-lg
}
Enter fullscreen mode Exit fullscreen mode

and yeah - it's a lot less clear exactly what's happening. In my book, clarity always trumps cleverness.

The colour scheme is nice though, so I usually import it into my SASS files.

Collapse
 
jedashford profile image
Jed Ashford

To someone more familiar with raw css, then that's going to be more clear. After using tailwind for a few days that syntax starts to be easy to understand. I'd argue actually much easier to know what happening than long lists of cryptic css commands.

A few:
w-full width: 100%;
w-screen width: 100vw;

container: The container class sets the max-width of an element to match the min-width of the current breakpoint.

How about a simple ring around a component?
Use 'ring'
In css: box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset --tw-ring-inset: inset;

All of this can be done using other libs and dependencies, but tailwind sure makes it easy.

Collapse
 
kerryboyko profile image
Kerry Boyko

Even the things that Tailwind "simplifies" are made more complex, and "ring" is a perfect example.

I'll admit, rings are difficult in CSS, which is why if I need to make one, I usually end up writing my own utility class for it.

But even looking at "ring" you end up having to add 5 classes or more to get your ring styled the way you want it. So "ring" ends up being "ring-3 ring-blue-300 ring-opacity-50 ring-offset-0 ring-offset-red-500" by the time you actually use it.

On the other hand, you could define all those into an actual utility CSS class, call it ".branded-ring" and just use that wherever you need it (instead of having that long string of five classes everywhere in your file.) Or even better, you could write branded-ring as a SCSS variable or a bit of styled component css`` code. If you use a CSS-in-JS solution, you could even have the color of the ring change according to props, giving you behavior control over style.

And it would be more readable, more customizable, and then you don't have to worry about it. You would be able to write it once, and then your entire team could just import your code and reuse it - rather than every developer having to remember how to tailwind-style a ring every time they use that.

Of course, rings aren't that difficult to do, because Google is a thing that exists, and there are a dozen websites which explains how exactly to do it.

Of course, what happens when the CSS spec updates and rings are added due to popular demand? It happened with flexbox. It happened with css-grid. You never know.

Thread Thread
 
thedutchcoder_57 profile image
Reinier Kaper

You can use @apply, which does the exact same thing.
It allows you to make a single class .branded-ring while still leveraging Tailwind's classes.

Thread Thread
 
moopet profile image
Ben Sinclair

You can do that in things like Sass, too. It's not a benefit of Tailwind.

Thread Thread
 
thedutchcoder_57 profile image
Reinier Kaper

But that's the point. It's not a good example of how using regular CSS (or pre processed CSS) is "better" in this case, it's not.

Thread Thread
 
moopet profile image
Ben Sinclair

I'm not sure I follow. I'm saying that having the same feature as an existing build process doesn't make the new one better, it makes it the same. I'm saying that the claim is that BMW make better cars than Ford because BMWs have four wheels.

Thread Thread
 
thedutchcoder_57 profile image
Reinier Kaper

It's not a valuable claim in the original article.

He doesn't like/use Tailwind as he doesn't see the benefit over using what he already does.

That's fine and totally reasonable, but it's not an argument against Tailwind. His whole article is about how Tailwind is useless.

Maybe to him it is, fine, no one argues that. But that doesn't make Tailwind useless in general.

His examples are supposed to show how bad Tailwind is. It isn't. It just doesn't fit him or his way of writing CSS.

Cool, absolutely nothing wrong with that, but again that didn't make Tailwind useless or bad in any way.

Collapse
 
raghavmisra profile image
Raghav Misra

lol same for that last thing

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
kerryboyko profile image
Kerry Boyko

I am coming up with a better solution. Working on it now.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
raghavmisra profile image
Raghav Misra

It's a criticism of an open source project, quite the opposite of a personal attack lol.

Thread Thread
 
tanzimibthesam profile image
Tanzim Ibthesam • Edited

Go and read the full article he attacked people who use Tailwind and expressed judgements. There is difference between constructive criticism n personal attack. everything in this world has pros and cons he could not provide any rationale arguments you can critisize and bash everything and if you think people who are using are fools then make a solution better than Tailwind. Enough is enough he expressed his thoughts I expressed mine I dont know him you dont know me lets lave this.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

@tanzimibthesam you can't on the one hand criticise Brian for writing an article against Tailwind and demand that he must provide a better solution before pointing out the problems with Tailwind, and then lambast him for doing exactly that.

In the field of development, we should regularly challenge the de-facto ways of doing things, and always be asking if the tool/method/etc is really the best thing to use in a given scenario. It's how the entire industry moves forward. We can question and bring forth discussion about things with articles and posts like this one. You don't have to agree with it, but it shouldn't warrant personal attacks or profanity.

Thread Thread
 
tanzimibthesam profile image
Tanzim Ibthesam • Edited

He has to provide a better solution cause something is called personal criticism and one thing is called bashing and saying everyone is wrong who is using it.He is doing personal attacks and providing negative vibes. Stop defending this silly man. You dont know him and I dont know you or him neither nor he is providing a solution nor people are gonna stop using Tailwind.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

He doesn't actually have to provide a better solution to anything if he wants to write a post pointing out what he feels are problems with that thing.

As for personal criticism, I can only go on what I saw on this whole thread. This involved him making some points that he felt were issues with Tailwind, and you throwing insults and profanity at him in replies. The only personal attacks I saw were from you. You're right in that I don't know him, I'm fairly impartial in this, although I do happen to agree with his criticisms of Tailwind.

As for him providing a solution (as I've said, he has no requirement to do this, it's akin to a non-driver pointing out problems with a bad motorist, or a non-artist highlighting parts of an ugly painting), he did actually mention he was working on something (and provided a link), for which you attacked him again. Those comments of yours appear to be deleted now, so I can't provide exact quotes, but I believe you did mention his proposed linked solution was a waste of time, bloated, and pointless.

Thread Thread
 
tanzimibthesam profile image
Tanzim Ibthesam

Yup leave it man peace 😂

Thread Thread
 
kerryboyko profile image
Kerry Boyko

Not to re-open this, but I get a smug set of satisfaction from the fact that Airfoil has already been declared "bloated" despite the fact that A) it hasn't been written yet, B) the point of Airfoil is that you only really get value from about 9 of Tailwind's 300+ classes, so why not just write those nine in a way they can be reused and integrated?

I understand putting so much of your identity into, say, a political movement that when someone makes criticisms of the political movement - no matter how valid - you feel personally attacked. But I don't understand how you can do this with a css framework.

Thread Thread
 
raghavmisra profile image
Raghav Misra

Amen

Collapse
 
jedashford profile image
Jed Ashford • Edited

For us web dev isn't massive part of our business and kicking media queries into the dark abyss was satisfying when moving to tailwind.

A few things.

  1. Tailwind-jit solves most of the concerns you listed with chaining, exact colors and values, etc. This should be a must and they're trying to get merged into the main project.
  2. Using Sass, we can compile tailwind into css classes. So you get the best of both worlds.
  3. Even senior devs appreciate anything like tailwind 'container' that does all of the calculations for you. Many of the classes provided are more powerful and easier to use than pure css. Plus you don't need to choose one or the other cause you can use both.
  4. How often are you rewriting styles across your website that you must have global css? Any of that is already externalized to the tailwind.config file. I've never rewritten a site/pages without having to start over with new html and css. Just comes with a redesign.
  5. Media queries are a thing of the past. So many abstracted queries across the project. min-width? max-width? Which way does that go again? Not explicitly defined in the html, so you're left guessing often why your css changed. All these queries are gone often with a simple sm:flex class and it lives with the html it alters. This is by far the most powerful and follows the proximity principle of development.

I wish you luck, always fun to learn something new and see how the community can alter development.

Collapse
 
kerryboyko profile image
Kerry Boyko

Interesting.

I would say that even if web dev isn't a massive part of your business, then why would you want to deal with Tailwind anyway? You're not really skipping out on the bulk of complexity of CSS, you're just writing CSS using an alternative syntax that maps 1-to-1 to actual CSS. It doesn't make it any easier.

Compare that to something like Bootstrap, which does make things like breakpoints, media queries, etc. easier. Yes, it's more opinionated, and "bootstrap sites look like bootstrap," but if web dev isn't a massive part of your business, then that's all you need.

And while you can compile tailwind into CSS classes (with either Sass, as you mention, or @apply) -- why would you want to? Why not just write the class directly, skip the middleman?

As for "container" - yes, it's easier to write 'container' than it is to fix max width at all media queries... the first time. But once you've done it once, it's easier to reuse. Now, if Tailwind were just a collection of commonly used CSS utility classes, I'd say that it has value, but "container" is a massive exception to the rule. 99% of tailwind is just one-to-one mappings of CSS properties.

In fact, I'd be surprised if someone hasn't written a very stripped down version of Tailwind that is just a single CSS file with "container" and one or two other cherry picked utilities. If they haven't, I might write it myself.

How often are you rewriting styles across your website that you must have global css?

I work at a consultancy. The answer can be "very," depending on the client's whim. But aside from that, the main reason I might rewrite a style is because it's a bug fix, and in that case, I'd rather have to fix the bug in one place rather than fix it in 100.

Media queries are a thing of the past.

Yes, but it's not like Tailwind invented the 760 grid system. If all you want is to avoid writing media queries everywhere, there are already tons of great libraries for doing that.

My problem isn't that there aren't some examples of good code out there in Tailwind. My problem is that it's 99% bad code, and the 1% of good code has been done, better, elsewhere.

Collapse
 
matheo profile image
Mateo Tibaquirá

Tailwind is making a lot of money nowadays, but the time will tell...

Collapse
 
moopet profile image
Ben Sinclair

I don't think making money is a useful metric for anything else except how much money you make.

Collapse
 
codyseibert profile image
Cody Seibert

It’s not the future bro. It’ll probably fade away when the hype is over

Collapse
 
tanzimibthesam profile image
Tanzim Ibthesam

It will fade away when something better comes

Collapse
 
codyseibert profile image
Cody Seibert

I tried it out, I’ll stick to BEM or SASS.

Collapse
 
alex_layne_3bbfe310a34ac7 profile image
Alex Layne

The most unreadable CSS I’ve ever seen was in BEM. You can use SASS with Tailwind.

Collapse
 
sandwich_hlp profile image
Michael Cohen

First of all, be nice. :)

Second, it's obvious from the article + comments that there are both advantages and disadvantages to Tailwind vs. CSS. Tailwind's advantages sound like they work well for you, and how you code things. For other developers, such as the author (or myself), Tailwind's "advantages" aren't beneficial at all, and are instead roadblocks on the way to coding up a design in a clean, robust, and self-explanatory fashion.

I'm glad Tailwind works for you, but just because that's the case, don't trash other people's preferences. :) Have a great day! :)

Collapse
 
jackmellis profile image
Jack

I'm not sure why tailwind is so divisive, I've not met anyone who thinks it's "okay", we either love it or hate it.
Personally I love it and here's why:
I've always hated external css files, or one monolithic global css file. Looking at some html and then spending 5 minutes trying to work out what ut looks like was always frustrating. Sometimes SoC isn't a such a good thing. You mention Vue, but Vue's SFCs were actually made to increase the coupling of your html/css/js!
You can't do media queries with inline styles.
Tailwind let's you abstract your units. This is one of the biggest pros for me. I can use a class like p-3 in multiple places, but if I decide I want bigger spacing, I can just update my tailwind config and all of my p-3 elements will update. You mention colors, but these are just tailwind's defaults. In reality you would configure tailwind to have primary and secondary colors, e.g. bg-primary-light. Then when your cpany decides to rebrand, it's super easy.
If you don't like how you end up with super long class names, there are simple solutions. I use a simple concat library to split my classes into multiple lines. I group my classes either by breakpoint or by area (like all flex related classes) and it's really readable.
On the same topic, if you're using something like react tailwind should actually encourage you to make more components. All of my tailwind classes are neatly tucked away in low level components. My application level components are incredibly terse and have no styles or classes on them.
But the biggest win for someone like me, is I can just "get on". I don't have to worry about coming up with BEM names, or where to locate my styles, or how to keep spacing consistent, or compiling sass. I can work on the stuff I love (functionality) with the confidence that it will look good and consistent.

That said, I get a lot of the reasons people don't "get" it. But if you were to join my team I'm afraid you'd just have to get over it! 🤣

Collapse
 
kerryboyko profile image
Kerry Boyko

I get it.

I honestly think that Tailwind might be a good fit for you and your projects at this time.

I actually think a better fit might be a more opinionated framework, such as purecss.io/ - but forget that for right now.

If you are designing websites as a secondary consideration, if you're not comfortable with CSS, if you just want to "get on" with your structure and behavior, then maybe I can see it. In this type of scenario, I could see how Tailwind might be used as a rapid prototyping tool to try out different designs, but that once a design is settled upon, Tailwind code is rapidly stripped out and replaced with a more scalable, maintainable solution.

If I were to join your team, yes, I'd get over it. I'm a professional - if my team lead were to go with Tailwind, I would explain my concerns, state that I believe it to be a large mistake, but at the end, follow the team lead. That's what you do. Make your case to the guy who makes the call, then follow the call.

But if I was team lead, and one of my experienced senior engineers were telling me that a framework I was considering was completely worthless and would generate tons of technical debt for no appreciable value, I'd at least pause and think about what he was saying before plowing ahead.

Collapse
 
sm0ke profile image
Sm0ke

The title is super funny.
.. <('_')> ..

Collapse
 
kerryboyko profile image
Kerry Boyko

I almost named it: "TailwindCSS: If it's named like a fart, and it smells like a fart..."

But that would be slightly unprofessional, so I toned down the obvious joke and buried it to the third paragraph.

Collapse
 
alex_layne_3bbfe310a34ac7 profile image
Alex Layne

Ah yes, comparing someone’s hard work to a fart in the body of the post is not at all unprofessional.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.