I've seen this post flung around like it has any valid points about TailwindCss. https://dev.to/brianboyko/tailwindcss-adds-complexity-does-nothing...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Nice rebuttal. I disagree obviously but you make your case well. Going to link this in the original article.
This is by far the classiest response to this article that I think could have been made. There are places where, in your original post, you make anecdotal comparisons between Tailwind users and some other kind of (much more obviously) bad idea, and I can understand why Tailwind users would take offense to such comparisons.
But they're comparisons being made to illustrate informatively, whose subjects are unfavorable ones to be compared to; this rebuttal post flat out declares you an idiot for some of the arguments you make and mocks you for trying to build a better CSS utility framework. The rhetoric goes from inflammatory to downright incendiary, and I don't know that I would've had the composure to still say "You make some good points," personally.
If this site had an equivalent of Reddit Gold, I would give it to you now. Or better, if I can buy you a KoFi, you absolutely deserve it
I came to programming through a long and winding path including through journalism and political activism. I've long since learned that trying to convince someone opposed to your view that you are right and they are wrong doesn't get anywhere.
It is far more productive - and rewarding - to get your opposite to think more clearly and deeply about their own argument. If there are flaws in my argument, criticism points them out, if there are flaws in their argument, criticism lays them bare.
Look if you mock people for using a tool, and then go on to write that same kind of tool but "better", i will mock you for it, untill you actually do it, and if you do. i will eat my own words won't i?
Not in a single place i have called Brian an idiot.
Please point any place that does it and i will add an edit to clarify those sentences.
What i've done is call his points strawmen, which they were. And those that we're not are applicable to any other tool dealing with css.
Which in no point attacks Brian personally, it attacks his points/opinions.
I even said that if you have certain circumstances, then his points/opinions are valid.
And I hope Brian saw it that way too. Otherwise i've done a horrible job. I can only add clarifications now.
Listen, you wrote this
He just lost it completely here.This is not the way to make a constructive article.
TailwindCSS is nothing more than another tool in my tool box.
Sometimes its the exact tool I need sometimes it's not.
Context and situation.
The thing is frameworks are more like a building material than tools. A tool is something, that can be switched easily without messing with a product you make with that tool. Replacing a regular screwdriver with an electric one changes your productivity and doesn't require rebuilding your walls. Choosing a wrong insulation material will get you into a lot of troubles if you want to replace it.
Thanks for great examples of real-life usage of TailwindCss!
I could see Brian's points as valid in the context of developing wordpress theme, which had me writing a lot of vanilla html + css with no great framework to encapsulate and re-use components. Maybe I just don't know a good way to do it, especially when you have to integrate with 3rd party plugins such as woocommerce.
Trying to juggle all the 3rd party classes, overriding them and trying to be DRY (as in not to rewrite all woocommerce templates for cart, product listing etc), also in keeping with wordpress standards simply left no place for TailwindCss which would bring more confusion to the table where each element has 5-10 "semantic" classes applied by woocommerce just in case.
This whole experience threw me back in time where "separation of concerns" is maybe a greater value and helps with readability.
Mykolas' example of using TailwindCss with frameworks that let you define and reuse components in very elegant manner (React etc.) also make perfect sense, and most of Brian's points against TailwindCss are not really a concern in a more modern codebase. I am ditching my wordpress theme and building a NextJS (React)+TailwindCss frontend and keeping WP+Woocommerce as a backend only. In this scenario, Mykolas' arguments make perfect sense.
I don't agree that Brian's points are all strawmen. They are one-sided maybe, but that's his opinion and I think a lot of readers could relate, especially if they're dealing with older code.
This clash of opinions makes me think - if you're dealing with problems that Brian brought up, maybe it's time you rethink tools you're using. If you have to manually crawl code to change some color in lots of places, it's not a question of CSS/SASS/Tailwind at all.
However, if you have no choice of technology to use or have to adhere to some standards or requirements where Brian's points resonate with you, probably TailwindCss will not make you life easier.
It's surprising how quickly we can go "all in" in these discussions :)
Ahh i can see the other side of things now. Had no idea that people with wordpress/woocomerce/older cobases have these issues. I've been lucky enough to only ever have worked with more up to date tools. I can see why this would be a big issue with tailwind in this case.
But like i mention in the post, i've said if you can't use it don't it's not the be all, end all.
I've been a developer for quiet a while. Sad to say I find Tailwind too tedious, laborious and grueling to implement. It's too dirty on the markup and you're forced to create markup components even when there's no need for it. And in doing that, you risk importing components which takes too much time, making the overall development experience very slow.
I also find its performance a bit slow for some reason. Perhaps maybe there's too much WET class items repeating over and over again in a single page? I'm unsure how their tree shaking mechanism works in this area.
In the meantime I'm sticking to Bootstrap until I see some overall workflow improvements from Tailwind.
Not sure what you mean about performance. As bootstrap will import all of its css. Tailwind only generates the classes that are used in your markup so you have 100 places where you use 'pt-10' you will only have one class in your css. Overall the css bundle is very small compared to anything else. You don't need to write css manualy and scope it or somehow else maintain it :)
But like i said you can use whatever you prefer and are productive in, just don't tell people they are stupid for using a tool. Which is what the original author of the post i'm rebuking implied.
Massive respect to my man out here using Bootstap over tailwind in 2023 🙌
I don't get your point, yes the example is exactly same with writing inline style and it's even write in the first page of tailwind's documentation
Tailwind is good for people who never understand how to use CSS otherwise it's a really pain to see what it does. The original post is right on every point he mentionned
You took one sentence and built a straw man around it, here's the full explanation from this post, if you've bothered to read just a few sentences down:
And i don't want to assume but your english seems to be a barrier here:
in some ways it is means that it looks like inline styles a little, but tailwind has much more power on top of that.
I've written a stylable component library from scratch using pure CSS. I've used CSS extensively before Tailwind. Saying that i never understood how to use CSS is a very big assumption from your part, and it's very wrong...
And if you've read the full post you'll see how i've debunked every point apart from opinions, but opinions are not facts, and there are at least as many opinions as there are people. Just because you like some ones opinion, doesn't make it right.
No, it's just not worth and make it less easy to read to quote the entire paragraph. You know I was talking about the all paragraph.
You seem really obsessed of it and even miss you are doing the same thing through your entire post.
It means what it means. Don't try to change it on your way. It means "yes it's similar to inline styles". It's not because you paint your banana in blue that means they are not banana anymore.
Fortunately tailwind has more power on top of that, if not why people would be interested of it ? But it doesn't change that you are giving bad habits to developer and at the end Tailwind isn't better than css
And ? Doesn't legitimate any of your saying and honestly build component library doesn't mean you know how to use CSS or HTML, you don't need to debug a page which multiples component or taking care about optimizing accessibility, SEO, etc ... .
So many tailwind components are missing some basic rules of html, by using only div/p instead of the correct tag, missing accessibility attribute, not taking care about the readability of it etc ...
An easy example in the Tailwind documentation (again) where they think it's better to replace a subheading tag by a div.
If you can't understand the importance of it, then maybe you should return to learn HTML or CSS instead of learning tailwind, would be more useful.
I hope you are reading what you write ...
You are just doing the exactly same thing with the original post but because it's YOUR opinion you things it's more valuable than others on.
From the beginning of your post to then end, and from the beginning of your answer to the end, you are doing exactly what your criticize.
My initial post didn't mean to be aggressive but there is no way to debate with someone like you.
Ok, so how tell me how would you do
md:flex hover:underlinewith inline styles? How is this a strawman from my side, please i'm interested?Please tell me where i've created strawman examples? I really don't see it, i gave real life examples from real projects. Not just some made up ways people would write it using any framework which has a concept of components? Which i explicitly mentioned a few times in the post. If you're writing without ability to use components then i agree tailwind might not be for you, which again i mentioned in the post...
What bad habits? Tailwind isn't better than CSS, tailwind is a way to use CSS, like BEM or SASS it's different from other ways, but it's still CSS don't see what your argument is here?
What is your argument here? This applies to the accessibility practices, SEO, etc... none of which has anything to do with writing CSS. CSS doesn't magically solve these things for you? Using the right semantic tags, aria attributes and so on has nothing to do with Tailwind, why are you blaming it for that?
How is this not aggressive from you? CSS and using the correct HTML tags/attributes has nothing to do with each other. You gave the argument:
I gave a counter argument:
Instead of accepting my counter argument, you've moved the goalpost and made a new argument:
This is a whole new argument, and again you assume that i don't know these things? What components are you talking about? From the documentation? Because Tailwind UI and Headless UI has all these things and more. With correct semantic tags, with screen reader only texts again from the docs. And even if they didn't writing correct HTML it's up to the developer. Tailwind has classes to help you, but it can't force you to do it. But this is a completely different argument, which has nothing to do with Tailwind or CSS...
What is your point?
That is just condescending... Like the way you finished your first reply "People who use Tailwind don't understand CSS. Hence why i'm a bit angry...
The initial post doesn't point out that it's just THEIR opinion and they show their opinion as Fact. I've written multiples times in my post, which of his points are opinions and gave counter opinions. In those cases i say that it's an opinion and try to provide examples of why i have these opinions, and ask people (leading) questions as i am biased. But i've not masqueraded my opinions as facts, i've pointed them out. And plenty of times i give an example where his opinions carry weight and for what reasons.
But you're doing the same, so when in Rome...
Well the way you ended your first post sure doesn't sound condescending:
There is plenty of ways to argue with me, but please show counter arguments to the examples i gave.
Here I'll give you a question how would i do something as simple as
hover:underlineormd:flexorsr-only sm:not-sr-onlywith inline styles?Hint: you can't...
So your argument is invalid straight out of the box and simply shows you don't understand what Tailwind does.
Your new arguments "Tailwind docs doesn't show you how to write aria attributes or how to optimise SEO". It's not Tailwinds problem, Tailwind doesn't claim to solve these things. Although TailwindUI components come with aria attributes and accessibility considerations. You say Tailwind doesn't do these things, but please tell me what CSS framework optimises your SEO? This is what i call strawman arguments, which is what i point out. Contrived examples of non-existing situations (at least not where you can use components), or argument that simply have nothing to do with the framework in question.
Give me actual examples to argue and i'll try my best to argue them. Opinions are just that opinions. I've pointed this out in my post a few times, and i'm not saying my opinion is the right one, i'm letting you to choose what is best for you, by pointing to examples of code you're most likely writing...
His post did the same, he showed arguments which:
And like i mentioned in the post, it's ok not to like it, it's ok not to use it. But if you're saying Tailwind is bad, or it gives developers bad habits. Then defend those opinions with facts/examples of real code. Show me better habits, better ways of writing CSS/HTML with actual real world code that you would use in a project using React/Vue/Svelte/etc...
Show me how would you refactor/maintain those examples?
Show me how would you avoid producing tons of duplicated CSS?
Show me how would you avoid cascading issues over multiple components?
Show me how would you ship only the css that your codebase is using?
Show me how to avoid context switching between html layout and writing styles for those layouts?
Show me these things that Tailwind gives you, with amazing documentation, amazing plugins, customisability, knowledge retention over different projects.
So telling me there's no way to debate me, when you've not given any examples or alternatives or actual arguments, is an easy escape isn't now?
And no answer...
Don't take a no answer as a "I was right, he was wrong"
I don't answer because you are not here for a debate or you probably try to be as much offensive as you can for hiding silly arguments. So I won't waste my time with it.
I'm giving you concrete arguments, questions. Is that not a debate?
Am i being offensive, by trying to clarify things?
But you're right it's ok to disagree and there isn't much point in arguing :)
Have a nice day :)
Of all the criticisms you can make of Tailwind, being only "good for people who don't understand CSS" seems the silliest. You obviously need to know how CSS works as it's a paper thin abstraction.
And to the other point, as this article points out, a critical difference appears as soon as you try to use media queries, which is impossible with inline styles.
Ok step by step now @bananica :
I have WWW under my fingertips and i came to my conclusions from my experience of using it, and creating websites/apps/games for it. I'm sure you came to yours the same way, it's ok, don't be hurt that not everyone shares your opinion. ;)
I love your article and argument, it's well written and thoughtful, but can you put a TL;DR at the top or bottom to summarize your argument in 7 bullet points, dawg.
PS: I agree with you.
… also, you've seen this, right? :: sancho.dev/blog/tailwind-and-desig...
A very important benefit you forgot in the list at the end is constraining css to a specific set of predefined rules following a design system. (And added UI consistency even if you don't have a design system.)
Deep down every dev that has worked on a semi-complex team project (not a toy hello world project) knows tailwind is a great tool.
If you accuse the original article of strawmaning, you should beware of the same trap.
You don't do
:class="{ 'section-card__body--padded': padding }"in a component. Most of the time you don't need BEM when working in a component. You just have:class="{padded}"and a small<style>block underneath in the same file that contains.padded { padding: var(--spacing-lg); }. And that's it. Clean, readable, consistent.Ok let's change it, and for the sake of your argument keep it simple, the class is in the component style.
First you have to come up with a name
padded.When on comming back to edit this, you have to find out what it means.
Now you have to scroll down/search and find this class in the component;
Even now you don't know what this means. it could mean anything
0 10pxor10pxor10px 0or even1px 2px 3px 4pxSo you have to find another varianble (which you had to name)
--spacing-lgand only then you see what it means.So:
And there are more issues.
What this class is defined globally?
What if this class depends on a parent class?
What if you only want to change the spacing here?
What if you reused this class in the same component? (Remember i've pointed out that this is quite a simple component, How do you change it only in one place?
You see how much more work that is, rather than seing
px-6and if need be updating it top-6because the design changed?And maybe for you it's
Clean, readable, consistent.and you're fine to live with that complexity. For me it's all over the place, so not clean. Not readable since you have to jump around to actuallyreadit. and not consitent as you might usepaddedhere and another class in a different place. You can even be lazy and just add extra things to thepaddedclass. So i personally don't see any of thatClean, readable, consistent.in your proposed solution.What Tailwind does here, is solve all of those issues:
.px-6And sure you might not see it the same way. So we can agree to dissagree what is more
Clean, readable, consistent.In practice there are two problems with these. First off,
bg-primary-500means there's still 10 or so variants. Normally I would only want a couple at most, the rest only make room for inconsistencies. That's why I prefer having a single file of CSS variables where all the available colors are defined and the palette is kept to a reasonable minimum.Secondly, all that formatting is hardcoded in the markup. For example, there's the Jetstream and Breeze frontend packages for Laravel. And the styles for all the components are defined within those components. If I want them to comply with my stylesheet I can't just update
.btn.btn-primaryand.form-controllike we can in CSS kits. You have to either go into all of the components and change them or you have to change what.text-red-600does. But what if another package has defined a similar button with.text-maroon-700? Do you redefine.text-red-600and.text-maroon-700to both be light orange?bg-primary-500 means there's still 10 or so variants - you can limit it to whatever is good for you, that's what the config is for, you can disable all colors and only have the ones you need in your design system.
All that formatting is hardcoded in the markup. - You are correct, and this is an actuall problem with Tailwind and themes. I don't think tailwind is well suited for packaging, which is mean to be re-used and customized. The tailwind UI, is a perfect example, you will have to change the classes to match your config/style and make your own components out of them. They provide Vue/React and some other framework, but it will require work to match your design.
But what you have done here is move the goalpost.
Neither me nor Brian talked about using external themes/components.
And i still think this is just as difficult with themes/components. Because you have to understand/find the classes. And while it's fine for something like button. It becomes much more difficult to manage, the more custom things you want with the theme/template/components.
At least with jetstream you can see all the components and see how their styles need to change.
Also you know you can search within specific folders right?
What I would do in this case is change the
-red-with-primary-. Jetstream doesn't have that many components.And then if you add another package you do the same change there.
What you do not do is change the meaning of
-red-or-maroon-.You say
justchange.btn.btn-primarywhy is that better thanjustchangeXButton.vuecomponent.Reasons I don't like it:
Reading your coment makes me think you've not actually read my post, nor have you ever used tailwind in any real capacity? Am i wrong? It's just that i've answered most of the opinions in the post.
Anyway thank you for your opinions. From personal experience and the experience of my teammates and all the people who use tailwind, we have a different opinion. It's fine if you don't like it, don't use it :)
Here's a mindfuck for you. There's no such thing as a CSS class.
Oh sorry for my bad english. What do you call
.some-classin the bellow case?Are you really picking on something so obscure? Like anyone reading this didn't understand the meaning that it's a css class selector...
CSS .class SelectorI am picking on it, because it isn't obscure. It is a subtle difference and gives you a hint on how to use it (not just class selector, but selectors in general). Judging the rest of the article, I recommend you to open your mind and read official docs on what the initial purpose of HTML was (and still is), then why CSS is separated and how to apply it correctly.
Just because some people never intended something else than text over the wire 2000 years ago. Doesn't make something "correct" or "incorrect". If so all the people creating all these amazing works with frameworks, should just stop doing it!!!
Because it wasn't intended to do those things!!!
Oh the horror :D
Oh boy... I realize I'm wasting my time here, but... The purpose of HTML wasn't sending text over the wire. I can see that you're too lazy to do basic reading, even if it's for your own good. Also, those ancient 2000 years ago technologies are the backbone of what we're doing now. They did something right. A lot of "modern best practices" and overall complexity, especially on frontend, are the direct consequence of people ignoring "ancient wisdom". I don't blame you. Oblivion is happiness.
Is this about correct of what you wanted me to read?
Although like in my post i disagree with the following statement.
I maintain a couple of code bases where i have written CSS the "correct" way and it's a pain for me to maintain those. I've been using Tailwind for years now and never find it hard to maintain those codebases, or upgrade tailwind versions from 1 to 3 while spending 20 minutes to fix breaking changes :D
So it's ok if this works for you. You do you! I'm happy for you!
Let me be happy with what I do. I'm not telling you to do anything, just like in this post.
I'm just telling people to not assume that their opinions are facts and their "best practices" are the only thing that matters and people who disagree are stupid, lazy, oblivious.
Opinion is not fact. "Best practices" in programming depend soo much on context and usually are not universal. I've changed jobs and tech stacks to move away from the complexity in the frontend framework land.
My opinion can be wrong too, if so i'll eat my own words won't I?
So far since Jun 21, 2018 I've been using Tailwind and never had any trouble, I'm willing to bet I won't in the future as well...
Good luck with your life Bananica. Thank you for your comments.
Yes, you've mentioned BEM. Which is also... bad. I also hope you realize what nonsense you've written in the previous response. Look, don't take my word for it. Get out of your comfort zone, and try something "new" just for the sake of it.
Where have i mentioned BEM, apart from responses, and where have i said it's good?
What is good in your opinion?
Don't take your word? What have you suggested, apart nitpicking and insulting?
You seem to know so much about me, i'm lazy, oblivious, don't want to leave my comfort zone, what else should i know about myself, you seem to be a bundle of knowledge about me :D
What is that something "new" you want me to try?
What nonsense have i written?
Look Bananica, you have not provided anything valuable to this discussion i'll just block you from now on.
You've mentioned it in the replies. Sure, block me. Judging by your responses to me and others, it ain't worth it.
PS
What is good in your opinion?
I ain't spoon-feeding my junior devs, I'm certainly not gonna do that for you. You have WWW under your fingertips. Google it. I've given you the initial hints.
What is that something "new" you want me to try?
To try and write CSS the way it is intended.
What nonsense have i written?
HTML is used for sending text over the wire
Tailwind is a wonderful tool for hobby projects and getting into CSS. Its great for people who don't know about CSS or best practices, for example when you change a font size you need to change line height as well for better readability, not everybody knows that and tailwind does that automatically. That's kinda cool, your uis will look somewhat consistent and accessible.
However, that's exactly why I don't want beginner designers/ui engineers to use tailwind, I want them to know about best practices of accessibility and use proper html tags for accessible and rss if we need reports from those sites, not just plugins for everything.
Here's a very little bit of what I know. Basically, in tailwind you have multiple classes; often a lot more classes than what you'd do normally, and we have to do lookup for each rules and apply them to the element with cssom. Doing less things is faster. Of course if we only did this, tailwind would be virtually unusable and so would lots of big front-end projects. We do have computed property and don't access the map directly, but that just adds up complexity for us and some overhead and infrequent stutters because of gc. Hence, the reason you might notice some hiccups when scrolling in high refresh rate displays in some huge applications using Tailwind, prop styles or even just normal css with lots and lots of classes or elements, or some sites crash because of gc pressure. Does the stutter matter for most people? Nope, I bet no one even notices most of the time.
What do I think about authors points? Not bad but not right either, more along the lines of me in 2003.
Do I hate tailwind? Hell no. :D Do I think its a bad idea? Maybe.
If you are interested in knowing more about building web applications at scale from someone who actually has done it in public. Check this out: largeapps.dev/
Would you say Panda CSS is the next step in the utility/atomic approach to styling web apps ?
Nope never tried CSS-in-JS :D
Tailwind so far survived switching multiple technologies for me, from Vue/React/Svelte. To simple html. To Liveview
That's the one constant is having tailwind as the styling.
Umm so Panda CSS is a CSS-in-JS tool only in the sense that it allows the dev to style their webapp directly in the js/ts but it generates static CSS at build time (A.K.A zero runtime cost plus SSR support). Perhaps take a look at it you might find it interesting, its sort of like a fusion dance between Tailwind CSS, Vanilla Extract and emotion CSS but manages to combine these without compromising the DX of styling complex webapps.
Sounds very nice. although it won't work with my current stack :/