DEV Community

Discussion on: TailwindCSS: Adds complexity, does nothing.

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

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.