Tools like Tailwind may help you develop your hobby project faster, but the thing is...
There shouldn't be any presentation logic in mark...
For further actions, you may consider blocking this person and/or reporting abuse
Edit: Maybe I should add the fact that I moved my personal website from Bulma to Tailwind CSS which was 12726 lines of CSS to 805 lines of CSS. Which made my stylesheet go down from 247.1kb to 13kb. I already have had tried to use the minimum possible in Bulma. With Tailwind CSS load only the used CSS.
As a perfectionist, I am very picky when it comes to my choice of an abstraction layer. Tailwind CSS has been a great abstraction layer IMO. I wrote about it here as well - dev.to/unsungnovelty/explaining-wh....
This. Our job's to translate things to solutions. HOW we do it is irrelevant. A lot of companies (Especially VC funded), nor the end users care which tool we used. All they could care is whether they get what they want, the way they want it, by the time they want it. That is it.
There is also something called Pit of success which was coined by Jeff Atwood. CSS is a perfect example of a tool which instead of directing you towards pit of success, directs you towards pit of despair. In short, a tool/technology/language by default should make it hard for you to fail and direct you towards success. And CSS is an example of pit of despair. And IMO, Tailwind CSS makes it much more manageable.
I love CSS as a technology. When I have time, I still write plain CSS to brush up my skills. I love CSS Grid a lot. But I would be lying if I say CSS is not a PITA. Also, Tailwind CSS still makes you think in CSS as I mentioned in the blog. Unlike component based CSS frameworks, for working with Tailwind CSS, you still need to know some CSS at least. And as you work with it, Tailwind CSS helps you learn plain CSS. Whereas component based CSS frameworks like bootstrap and bulma makes you forget what you know in CSS. It is far better than
navbarclasses IMO.Personally I understand where you are coming from. At least I think I do. Cos I used to think similarly. But it's all about balance. And the right tool is extremely subjective based on your requirements and the time you have to name a few. :)
This is the biggest part of the problem I've personally experienced. If they don't care, we're the only ones remaining who should still do, ideally. I don't suggest throwing out all existing frameworks right now and going Vanilla. I just advocate for using it more, improving it or at least trying to stick to best practices. Because clearly, the direction we're going right now is concerning.
I agree that it's all about balance, and using the right tool for the job.
That is a good POV. End goal being plain CSS. The utility classes does crowd HTML markup. Which is my only problem with Tailwind CSS so far. But developer experience Tailwind CSS provides is better for me though. And with components based frameworks like Bootstrap, I pay a lot in performance.
With Tailwind CSS, I bundle only what I use. So as a dev, I am more happy thanks to the developer experience (DX) and performance. So the truth is, at least for a some time, I don't see a reason to go back to plain CSS or component based frameworks.
Yes, tailwind can be nice for POC.
Although, tailwind let's you forget how to name things properly, and adds a big mess of obfuscated elements, and thus should never be used in production or just projects that scale.
I agree with the markup getting crowded with the utility classes. While it is not recommend IIRC, you can create components and redirect it to a class name and use Tailwind CSS that way. But this issue and naming convention which is not needed cos you are not using components anymore anyways against:
This means, if I want to use a CSS property which is not yet supported in Tailwind CSS,
[clip-path:circle(50%)]. Voila! I just usedclip-pathproperty which is not supported in tailwind CSS. Configuring a CSS framework is a long and bumpy road in other frameworks. Also, it kills the whole point of using a framework because of the way it is designed.Also the same way, I can use any values with any units with a utility class like
w-[80%]orw-[90rem]. This means I can use a value outside of the default width values natively without hacks.I don't know about you. For me pros outweighs the cons. You get the best of both worlds. A framework's convenience and CSS's performance. If you are using a CSS framework today, Tailwind CSS is one of the best if not the best. Like I said earlier, there is always a price to pay with abstractions. It is up to you to see if the pros outweighs your cons for your project/product. If it does, you should use it and don't, if it doesn't. :)
Nikhil,
You mentioned "Our job's to translate things to solutions. HOW we do it is irrelevant.".
I wouldn't quick necessarily agree with that because if dev A creates very confusing, hard-to-update code when dev B is working on it that's an issue.
However, if dev A creates code that is considered a "hack" by some developers but still gets the job done and isn't dangerous and dev B can update it that's OK.
Hey Matt,
I think you missed an important part which went along with the quoted statement. I said it is irrelevant to the employers and end users. I wasn't talking about developers.
The scenarios that you mentioned as well, both the scenarios are relevant to the developers. Not necessarily for the employers or end users as I mentioned earlier.
A website with the mentioned first scenario can succeed and the second scenario can fail if the translation of solutions and business doesn't go well. Also vice versa. I definitely agree with you on the fact that the developers should write clean and understandable code. And that we should avoid magic and hacks as much as possible.
But with regards to the topic at hand, I don't think Tailwind CSS is a hack. Also, it actually teaches plain CSS and provides performance while doing it. I cannot say the same for component based CSS frameworks which are always a performance hog and makes you forget plain CSS. They only provide performance value when they can be utilised to the max, which mostly will be in a large project. Otherwise there is a performance tax.
Apart from the utility classes crowding the markup, I don't see any problem here. Not to mention if you want, you can make those into components and use it that way. The official typography plugin also provides sane defaults to many html elements through
proseutility class. So for me, the pros outweighs the cons by many a mile. But that is just my use case. I don't think one abstraction layer can make everyone happy. And that is fine. It's the same reason why we have many choices. :)Hi Nikhil,
I heard you say "Our job's to translate things to solutions. HOW we do it is irrelevant." Yet, I still believe that code solutions are still relevant to managers if trying to edit or add to the current code is extremely difficult and time confusing.
So yes, managers should definitely know in a general and easy-to-understand way if a previously created code is time confusing to add to or edit.
But, if code is structured in a way that's easy to edit and can be scaled up, then managers don't need to know as many details.
This is something I've experienced too. I've even found myself going back to Tailwind's docs for looking up something about how CSS works (e.g. the different parts of flexbox).
A self-proclaimed perfectionist uses “Cos”; oh the irony! 😉
I completely missed this comment! :D
I can't agree more. I can say that your comment is better than the original article, lol )) I've been using Tailwind like frameworks on huge enterprise ecommerce projects with hundred thouthands of pages and I've seen only improvements when I moved whole thing to Tailwind. If I could name just one trully outstanding idea that appeared on the web in the last 20 years that would be Tailwind, it just changed everything for me.
I couldn't disagree more.
Being dogmatic in a fast-changing industry will only leave you in the mud shaking your fist at everyone else who's moving past you.
I recently migrated a large project from pure CSS to Tailwind - not only did we see huge performance improvements, we also improved development time and maintainability of the whole project. New devs no longer have to learn naming conventions or discover where CSS rules are being declared.
If you want to use plain CSS in your pet project, go for it. But don't shove these ideas down people's throats just because you have ideological oppositions to a new paradigm.
If you had performance, maintainability problems with plain CSS, it's not the CSS. It's the developers, engineering managers, and their ignorance towards best practices. And maybe, just maybe, unrealistic deadlines.
If new devs are having problems with CSS, there can be multiple reasons: the conventions were not properly communicated, the information was not publicly available, the onboarding process is not well thought out or last but not least, devs weren't qualified enough. And I don't blame them. It's just the current state of the world.
Now, granted, CSS is not perfect, but it's constantly improving with additions like variables, CSS modules. I am not shoving ideas down peoples throats, people are free to criticize my methods, as long as the criticism is objective. Also, I encourage critical thinking. The post above is just my take on things, and my opinion on how we should move forward. Everyone is free to disagree.
And, there are no dogmas, just some experience sprinkled with common sense. I'm pretty open minded. If you have a better solution, or you have your own take on the situation, I am happy to hear it. Because improving what we currently have is a collective effort.
A class name isn't presentation logic, unless it is, in which case it's clunky and misleading. A class name should describe the content, on a meta level, e.g. "testimonial", not how you want the content to look, e.g. "bg-slate-100”. Describing how content should look is the job of CSS.
If you only use class names for presentation then you're missing the point.
Very bad take, if you don't like tailwind, thats understandable, but shoving that opinion down everyone's throat?
How does tailwind hurt accessibility?
Huh? It's a CSS framework how will it hurt SEO performance? I don't think you know how Tailwind works. Tailwind creates a stylesheet at build time based on the classes you used. Therefore these is very less unused CSS, hence performance is very good. This will only boost SEO no?
What? Tailwind will almost always create a smaller CSS file in a large scale project.
So you're saying Deno Deploy, PlanetScale, Ping.gg and hundreds more are hobby projects?
Never seen a worse and more incorrect take on Tailwind lmao.
Thanks for your feedback :)
LOL no one's shoving anything down anybody's throat. At least not in this post.
The title is "Say no to Tailwind, embrace plain CSS" lol. Please read the post before commenting.
yeah, i completely agree with this! Please research before writing this type of blog, because many beginners will be negatively influenced by this.
Can't agree more. We live in the era of blind people being guided by the blind people and unfortunately all those people have access to internet and time to write articles.
Good take
Classes are attributes of html elements. Tailwind classes are not html elements like font or center, so you can't compare them like you do. I don't think many front end developers are building pure html and alongside css elements. Who does that anyway? 'Components' in whatever framework you use, that include encapsulated styles, is the future an the way to go nowadays. Personally also not a fan of Tailwind but classes are still part of common html sematics.
Sorry if my post was not clear enough. I am not against using classes, I am against using presentation classes. I prefer "navbar", "features", "testimonials" over "bg:blue", "text-center". The markup should not contain information about how something looks.
Sure, Tailwind provides classes, not tags. But, be it a presentation class like "text-center" or a
<center>tag, I think neither is acceptable or semantic.Let's agree that "Who does that anyway?" is not a very good justification against doing it.
Using frameworks is not the only way to create websites. What happened to Vanilla JS? Almost everyone today creates websites using frameworks and component libraries. I don't think this is the way to go, though I understand why and how we got there. Honestly, this can be a topic for another article.
Yes, Javascript frameworks are not the only way to build websites, but they are the best way right now. Tailwind isn't being marketed to individuals building straight vanilla html/css/js sites, it's more for those where functionality takes center stage over styling than anything. Being ignorant to the way new web technologies and practices are evolving is only going to hurt your future projects and skill set down the line.
I've been and still am using those frameworks while working on multiple enterprise projects. I've experienced both pros and cons of those. I'm well aware of current trends, I've been closely observing the evolution of the web development, tools and methods for more than 5 years.
If you think this post is intended to just trash current tools and technologies, read again. While highlighting the weak points of a popular tool, this post is about wondering if there's a better way, and pushing innovation in the right direction while preserving established best practices. The intention is far from being ignorant. On the contrary, it's about caring enough to attempt improving what we already have today.
Without any doubt, how we're creating websites today is sub-optimal at best. Huge bundle sizes, millions of tools and dependencies, slow, not-accessible, unmaintainable websites. And the list goes on.
If you consider yourself a decent software engineer and take pride in being one, you should try to be professional enough to create quality products. But that's my take on the matter. Ultimately, it's just a matter of priorities. If you're just focused on making money, moving up the career chain, or surviving given the current state of the software engineering world, this discussion is pointless.
Either way, I wish you success, and I hope someday you will join me in an attempt to improve and perfect the technology, which will lead to the creation of amazing, performant and accessible products, the better web.
I don't think you really have a good view on how we noways should build good, nice, userfriendly and dev maintainable websites. Bundle sizes exceed but we also have more bandwith, faster devices an we need to add lots of features to compete with the competition. It is just how it works. But if you see unmaintainable websites using modern technologies than you are doing it completely wrong. In my 20 year web dev experience I watched us fighting various browser related issues (IE) and trying to get things work cross browser just by using lots of old hacks. I'm glad those days are mostly over because of our new much improved set of tools all self respecting developer should use today.
I agree on most parts, maybe I don't understand the difference between classes and presentation classes. I'm sure all classes are meant for presentation. But how Tailwind let's you add lots and lots of separate classes for displaying 1 html component is mostly very confusing an time consuming while fixing issues with styling. And it makes the pure html harder to read.
I try to stay away from 'Vannilla JS' written websites because nowadays using reactive frameworks, typescript, reusable components, scss makes my work a lot easier, less buggier, and takes much less time to build. Great article btw 👍
Yes. Of HTML semantics. i.e. The meaning of the content. Presentation information should not appear in HTML classes.
According to who, exactly?
Everybody for the last 20 years or so? …until people started reinventing inline-styles with "utility" css frameworks (the whole idea of "css frameworks" is…)
I completely disagree in two main things:
You are basically saying that using Tailwind means using semantically incorrect HTML, those are two separate things. You can be using plain HTML+CSS and still use pure divs, so I would emphasize on that and make a distinction, using Tailwind is not related to writing bad HTML code
In your conclusion you say that it is used for projects that don't scale. It's totally the opposite. Tailwind is made exactly for projects that scale, specifically for those that have a color palette, themes, dark mode, responsive, accesibility. Handling all of those features in plain CSS is not only hard to maintain but more error-prone. Tailwind uses PostCSS which will also autoprefix your classes to support a variety of browsers and also will analyze the classes and remove from the production build those that aren't used. This is super helpful in production-enterprise-big projects, because saving a couple of KBs translates directly into money.
I can sometimes feel you that in order to make something production ready today, a lot of extra tools are needed, but that's the complexity of web development: supporting too many devices, screen resolutions and being performant and styled at the same time. In order for us to be able to use plain CSS and JS IMHO, we would need a new CSS and JS that is not backwards compatible, because that's the main problem, and in order to do that, you would need the reinvent the wheel. And there's nothing wrong with that, take Adobe Flash for example, it is now deprecated.
Completely agree on the 1st point. The semantic HTML pitch was practically an extra. I can see how someone reading the post may get an impression that using Tailwind is associated with writing bad HTML. My bad. I will try to edit it.
Somewhat agree on 2nd point. I never said that Tailwind is used on projects that don't scale. I suggest using it on smaller hobby or proof of concepts project. I agree that it may be easier to scale with Tailwind. I'm just implying that the cost of using it may be more than the advantages it provides. Of course it's just a tool, and it has it's advantages.
Basically this article turned out to be a little bit cheesier than anticipated. I think your take on this is healthier and more balanced. I appreciate the contribution and constructive criticism.
I really can't understand what "costs" you are trying to point to here? No one will crucify you if you write md:flex in your html
I agree with you.
I used to use tailwind a lot but my mind changed after reading articles from Jason knight. I started learning css from tailwind but kept coming across roadblocks and having to use custom css a lot to get things working the way I wanted them.
After seeing how html and css are actually better and really all you need for most of front end development. I stopped using tailwindcss.
Mainly because it didn't make sense to me to put styling info inside of html itself. It was much more cleaner to seperate the styling from the content and structure.
I also learned that all those class names bloated the ht l for user agents who had no need for styling.
Honestly seeing how badly websites with frontend frameworks and css frameworks load on a slow 3g connection goes to show how bad the products were and how little consideration was given to performance as a default. You'd have to spend exponential amount of time to reduce page transfer sizes to kbs instead of mbs compared to properly using
Html
Css
Js
For what they each were meant to be used for.
Sorry for the ranting. Props for the article.
Oh, thank you for your article. 🙏🏼
I am currently working on a project that I have taken over. The team is using Bulma (same as Tailwind), and when I see that a class is called
titleonly to give the font-size and two three parameters more, it makes me shiver.Why do this knowing that there are already semantic tags...?
Scoured the comments and can’t see anyone linking it, so I’ll pop it on here: In Defense of Utility-First CSS.
Great article well worth the read. Specifically, there’s a great paragraph around the “dogmatic” adoption of “separation of concerns”, rather than viewing your HTML and CSS as a “which depends on which” relationship. Really interesting stuff.
Happy to stick with my TailwindCSS scalable, maintainable and WCAG 2.1 AA complaint projects. Each to their own I guess! 😊
There's some great discussion here in the comments, and perhaps some of my contribution will have been covered, but I'd like to talk a little about my experience of both Tailwind and non-tailwind projects.
Tailwind serves a purpose, and it's good at what it does. It's not my first choice of framework for CSS, because I have extensive CSS experience and Tailwind is relatively new to the party, so if I'm working on a project with Tailwind I need to adapt my style slightly.
As an example: late last year I worked on a new project for a startup, and they'd chosen to use Tailwind. Their reason for doing so was simple and practical: their CTO was more of a backend developer than a frontender, and he hadn't done much CSS in his career. Tailwind removes issues of inheritance and cascading to a good degree, so he knew he could apply a class and style as he wanted without having to dive into CSS too much and learn about all it's intricacies.
I think Tailwind is great for prototyping quickly, and we got good traction early by using it, but as certain patterns emerged from the code, and as the codebase swelled, I found myself wanting (and perhaps even needing) a more structured approach. In order to reuse lengthy groups of classes, I converted some of these into CSS Components. This had the useful side-effect of reducing the size of the HTML, adding context to some elements and allowing us to update the style across multiple pages if needed. As a simple example, rather than having the heading definitions sprinkled throughout the project:
Using Tailwind's
@applysyntax, this becomesWhile adding a class looks like more code, as soon as you have multiple identical h2 tags on different pages you soon start to benefit.
This problem could be mitigated with components in your favourite JS framework, but you may decide you don't need a component just for a header (until that header has more functionality you want to control), or you may decide that for simplicity the overhead of multiple identical headings using Tailwind is fine - that's cool. There's no wrong answers here.
Tailwind can be a great asset, but it can also be misused. I recently inherited some React code for a new project, and one page I need to work on is a contact form. The code starts like this:
I can read this and make sense of it, and I can run the project and see what's happening here, but it's not very pretty (to my eyes) and probably needs to be refactored into sub-components so I can reuse these styles on other forms I'll be building soon.
This code would also benefit from using semantic tags for context and SEO, but these are issues with this implementation, and not a problem with Tailwind itself.
The OP mentioned that Tailwind could be good for a hobby project. This is unnecessarily harsh, as Tailwind can (can does) work well on enterprise projects, but if you opt for it will depend on your team's strengths, your tech stack as well as your own personal preference.
So, don't "say no to Tailwind", say instead "what problem does Tailwind try to solve? And will it help my team deliver this project?"
The same transformation could likely be done from CSS modules rather than CSS-in-JS BTW, even possibly as a processing step on a statically generate site (or even server-side generated one if you're able to process templates).
Anyway, the point of "Facebook uses atomic CSS" is wrong, and the point of "don't use atomic CSS like Tailwind" still holds.
And I think this tooling/approach (CSS-in-JS mostly) works for Facebook because they're using components (see my other comment: dev.to/tbroyer/comment/20dfk)
Facebook developers don't use such classes though, they're the result of tooling for technical optimizations.
Who cares how you name your classes, what matters is the aproach
I absolutely never talked about the class names, but specifically the approach: engineering.fb.com/2020/05/08/web/...
I have visceral aversion for tailwind and other " utility css" frameworks, but maybe when used with component frameworks like React it might be worth it: with small enough components you care much less about "separation of concerns" between markup, styling and behavior (you keep them all in a single file, or possibly two closely related files) and then maybe in this situation those tools shine. But that'd be the only situation I'd accept using them. I'm traumatized enough by Bootstrap already.
If you consider what the article is suggesting wrong, do your own thing. There are multiple reasons why I consider the article's suggestion more suitable, and some of them were highlighted. You are free to disagree.
Of course, tech giants CAN overwrite anything they want, but DO they? I wonder why is that...
I don't get how someone can consider those standards outdated. If they're not updated it doesn't mean they are outdated. It is more like, if it is unchanged, then the standards are still up to date.
No one is preventing you from creating horrible components like
<primary-button>(if you don't see what's wrong with it, well...). If someone doesn't know how to use the tool, doesn't mean the tool is to blame. I agree that the Web Components Suit is not perfect yet and is relatively new, I'm suggesting to perfect it, because I think it's the right path to take. Standardize the solutions, instead of creating new bad solutions that try to solve the same problem.I have used and am still using (unfortunately) Tailwind on an enterprise project. I don't get how can someone justify the use of something that uses pixels instead of relative units for breakpoints, but at the same time uses relative units for font sizes, is slopping a ton of duplicate classes in markup, makes HTML longer to load and makes it barely unreadable for devs, breaks the caching model and the list goes on.
But if it's your cup of tea, go for it.
Totally agree.
Writing "bg-slate-100 rounded-xl p-8 dark:bg-slate-800" instead of "testimonials" more than once is hard to understand, read and maintain, so why should we do so?
Because we don't know CSS.
@lukeshiru I get your points, I know the problems you've encountered and why are you using the tools you are using today. I'm just proposing a better solution.
It was not mentioned once in the post that the projects using Tailwind are hobby projects. The article suggests only using it on hobby projects.
If Facebook or any other tech giant uses X, it doesn't mean that X is the right or optimal way to do it. I doubt it they would use it again if they were to rewrite the platform (I'm being optimistic about the professionalism of their dev team).
I don't know about the "very 90s style", but you should definitely check out the modern version of W3C Recommendation on element semantics. It highlights the importance of using semantic HTML for creating a accessible website.
Also, take a look at the note about classes from HTML Spec Standard.
These are basically documentation for "how to properly use HTML/CSS".
As for the modern ways of building websites without sacrificing maintainability, scalability and accessibility: you can create your components using Web Components Suite combined with CSS modules. And you will be able to follow the class naming convention suggested by HTML Standard. Or you can even ditch the class usage and use the CSS type selectors to target and style the custom element.
Yes, as of now the Web Components are not fully supported by some browsers (source). But I really believe we need to push the wide adoption instead of creating alternative solutions for those problems.
Ok. I found one example of Tailwind that I am sort of ok with.
First, the whole @apply thing to name a class is ill advised by Tailwind? I see a lot of component libs using it.
But material-tailwind.com/ took an approach to combine the tailwind strings as JS. No idea if it still compiles to small css files. But for a lot of short-hand css, it isn't bad. Sure, it is super easy to add padding in css. I'll admit that
py-2with the 2 a multiplier of my base spacing could be easier for a team to remember.But the instant the HTML gets overloaded with all this, it just becomes noise.
This comment is more useful than the article
Yes writing components is the best thing you can do to avoid repeating those ugly class bullshit. But why than using them at all. With SFC in Vue you have a local environment to style your component with real classes that contains real CSS, you should learn at all.
So no need to use Tailwind to use another indirection and not understanding CSS.
Yes there are simpler lightweight frameworks like PureCss which are bit simpler and provide bare minimum for websites which need to be blazingly fast and work under non-optimal Low-speed networks.
It can also be used as base along with only required components from other frameworks, eg. Bootstrap Modal, etc.
Very good article, appreciate it.
Tailwind seems easy at first. Then you end up with a crazy HTML with so much class markup it is hard to figure out.
So then you start composing your tailwind so that you can apply a style easier. At that point, you might as well use CSS?
This is a bad take.
First off, CSS libraries like Tailwind have absolutely nothing to do with the semantic markup of the HTML content, so bringing that up is a totally moot point.
As far as "better SEO" and performance is concerned, Tailwind, out of the box, removes any unused classes from the bundled CSS file, ensuring that only the classes being used are loaded by the client, resulting in significantly smaller bundle sizes. On top of that, every class that is bundled is reusable from anywhere that shares that stylesheet. The entire point of helper classes is that you're not having to reuse the same style properties, and therefore reducing the overhead of multiple classes sharing the same properties.
I'm not even going to bother asking what you mean by this, because this is obviously just a random thought you had that literally has no legs to stand on.
This is just such a poor, lazy, and elitist counter-argument to using a framework that genuinely solves a real-world problem for a lot of developers.
You are using the wrong reasons to do not like a bunch of classes in a HTML element. Tailwind is about using composables classes that do exactly what the class name
means. And you really can use @apply to stick together those classes in just one classe name in order to make html cleaner. This is future, this is fast e highly customisable css. Tailwind has a lot of others features, you probably won't have a smaller css bundle than the tailwind's purge system. I don't really know what you mean with "avoid legal problems in the future".
Your article doesn't have strong reasons why people should stop using it besides a pure opinion based. You should show numbers, bundle size, benchmarking or at least a real scenario where tailwind ruined the project. Without that your article won't convince much people, only the ones whose are looking for a reason to do not learn tailwind.
no more questions your honor
I have other data :O!
Maybe you can use
@applyfor solve your antipathy of Tailwind.Take a look at this section of TailwindCSS documentation.
@applyjust an escape route in tailwind if you like give class names. It is optional but do not prefered by tailwind idea. I meet with tailwind just a one month ago, but I immediatley like that concept, but inline languages is wierd at first look. But this is work when you put a single tailwind cdn link into a single html file.this is ridiculous. The overall attitude is to go "bare metal" with each aspect of development. I suppose that is fine if you have all the time in the world, and want to be completely Artisan about it. Do you grind your coffee beans with a Mortar and Pestle too?
it's like saying "dont use Laravel, stick to bare PHP". Or the same idea for Angular, React, Vue, or Svelte.
it's like saying "dont use an ORM, stick to MySQL direct"
you say mastering CSS can't be hard. That may be true. But, let's see, what else have we got going on in the project? Some HTML, of course. Lots of JavaScript, perhaps with some libraries or frameworks.. oh, and what's this over here? Some WebSockets? ok, cool. Oh, and a chrome extension, and perhaps the Push Notifications API? Nice! And hey dont forget about Local Storage. Still with me? Did you switch over to ViteJS to get away from the complexity of WebPack? I did! Do I need to mention WebGL? You against using Three.js for that?
Oh, and we're not done yet! There's some node.js.. how about we just use that raw? Do you object to people using Express? And we're using MongoDB as a store, so should we do that raw? You object to using Mongoose? I could go on. citing examples from Networking, Security, AWS, DevOps, and so on.
Almost everything I mentioned has come up for me this year. I dont have the luxury of hanging out in a particular silo, such as pure css. TailwindCSS is a solid means of getting a great result. And yes, I'm talking about real enterprise paying stuff...
If you are specializing in some narrow aspect of web dev, and you wish to go bare metal, more power to you. But dont expect it to fly with those who have projects that are literally Rube Goldberg machines with lots of moving parts. we have deadlines, and we need to get things done. TailwindCSS is wonderful for what it does.
I think both have their use cases.
This is hilarious to read. Just use what you want that is sensible and works best for your needs. Btw I use tailwind go tailwind
The issue with this post is that it is more a rant than a "don't use tailwind because is bad for entrerprise and here are the facts".
You did not show/share facts at all, everything was subjective, and you also mixed HTML with CSS (HTML semantis has nothing to do with CSS).
This is another post ranting why a dev does not like a TOOL, than a post showing why (relative to the author) is a bad tool...
I would say try to write it again, but have facts. If you don't, then you did not understand the tool.
I’m not sure I agree. Tailwind removes a lot of the negative parts about CSS. I shouldn’t have to go into a style sheet and write a 5 or 7 line block of code for styling an html component. I should leave stylingsheets for site specific styling like color palettes or unique elements that a site might have. Other than that tailwind does a great job doing exactly what you need it to do. There’s a time and a place. Also, I haven’t seen lighthouse hold back my SEO score because of tailwind.
Of course you have to write code for styling an html component. That's literally our job! Saying "it's easier this way" just doesn't cut it, not enough to justify the method. Abstractions are great, but we are sacrificing some flexibility with each abstarction. Also, not every abstraction is implemented correctly.
I agree that from the business standpoint it might seem that using Tailwind is better. But it's a short term solution. You can easily see how wrong it is from the technical standpoint.
The lighthouse does not check your website against every single SEO metric. With the limited information there's limited conclusion accuracy.
You don't need to do that if you don't want to. You can use any old library and include it with Sass, or even use Tailwind that way if you want - it's just that people prefer to do it the harmful way.
This is a terrible take. Having worked on enterprise codebases that involved 50 to 100 UI developers spread across just as many projects, I felt all the pain of CSS and its lack of scalability. Tailwind is an absolute dream in comparison.
What is sad, that the author looks only on naming in html. Tailwind css is not only about it. This tool is much bigger and deeper. What about css minimization in your project? Pure CSS give you all human error mistakes to bloat css code. Makes things difficult and not maintainable.
It would be great to have aliases in tailwind css to make short names in className and long list of class names from tailwind css somewhere near. That would solve naming issue. Tailwind css also brings some best practices into css code... I think this post is exactly about opposite - make your pet projects with pure css
I find it so hard to look ever since picking up tailwind. Like rapid development is not a joke lol. I can build a multi page web apps UI in like 10 minutes bootstrapping from a CRA lol. But I do miss be some styled-components, which is essentially css 💯
I diaagree. Hard 🤷
I think tailwind styling is great.
Plus if you use React you also have libraries such as MUI & ChakraUI for example, MUI has sx prop which accepts stylesheet props in a neat and readable way. And Chakra has built in stylesheet props for each component, those props mounts performantly via Emotion, (mui also supports styled components). And tailwind is also a great solution. Code will always get unreadable if you dont separate components and concerns..
It doesn’t sound like OP understands the “utility”of Tailwind.
First off, I like plain vanilla CSS and always build my HTML first before adding styles/JS. I also typically don’t find a good reason to use CSS frameworks other than for rapid prototyping or to build the same thing over and over again. But Tailwind is different. It’s not a CSS framework in the exact same way React is not a JS framework. It’s a relatively simple abstraction over a base language that helps you build bigger abstractions, like frameworks.
The reasoning posted for not using it is nonsense. Because you’re not supposed to use styles in your markup? One reason they took out HTML tags strictly for styling is because it didn’t make sense to use them anymore because CSS was a thing. It made it confusing where the styles came from. Same reason to avoid inline styles. And that’s actually a big problem we have with vanilla CSS across large codebases.
This is why vanilla CSS methodologies like BEM and Atomic CSS(which tailwind is based off of) were created, to better organize styles so we know where they come from and minimize side-effects. But they have their drawbacks and global style based frameworks are not as useful in component based architectures.
If we’re going to talk about scale, vanilla CSS usually does not scale well. You end up with a ton of styles that override each other and figuring out the cascade becomes more difficult. Sure you can prevent it with review and good practices/hygiene, but like other tech debt, complexity is unavoidable as the project scope gets larger. If you look at a lot of “enterprise” codebases, they likely use Bootstrap to avoid complexity! CSS was not created for deeply nested DOM trees that modern SPAs end up having. Scoped styles become essential, but the problem with that is you could end up with a lot of duplication and possibly a lot of files.
Here is where Tailwind fits in. It does not get in the way of semantic HTML, it’s all classes. It works great with templates/components. You don’t need to context switch and you can set tailwind classes conditionally. You don’t need separate style sheets for every component. You don’t have to worry about the cascade causing unwanted side effects. You don’t have the performance cost of CSS-in-JS because it builds static CSS that is cached. The only big drawback is the learning curve. There are also ways around all the class names. I’d argue tailwind is a great way to grow a project quickly without introducing a ton of debt, and also allows the flexibility to easily build something bespoke.
You don’t have to learn every new CSS framework, you learn the one method your team uses (or whatever works for you, if you work solo), and maybe a couple others to see what else is out there and to diversify a bit.
But I do agree, everyone who works on the front end should learn how to use plain CSS, how the cascade work and about specificity. As for how to improve on HTML/CSS, that’s what these tools do, just in different ways for different use cases. You can’t improve on HTML/CSS without building tools around it. It’s part of your job as a dev to learn which tools work best for the project/product.
This comment should be a separated article. Couldn't agree more with the points in the comment. TailwindCSS makes our life as developers much easier, although yes the HTML is bloated with irrelevant class names. However, who the heck cares about the class names beside us? And yes, we are not naming our class names to something meaningful, but do it to our components insteads. And the idea about TailwindCSS is ruining people knowledge about CSS is very wrong, in fact you can learn how CSS works from it (yes I'm not kidding).
This should be posted as an opposing article as it has more substantial basis than original post, IMHO.
I haven't used TailwindCSS, but I have been inspired by it's utility classes paradigm. By refactoring only a fraction of CSS/HTML I managed to decrease CSS footprint by at least 30% in production! TailwindCSS removes all unused classes from production bundle automatically, but my setup is not so elaborate as I've been adding only those utility classes that are actually being used - which lead to certain minimalism in a way I chose my classes in UI, so CSS footprint is even smaller.
The main goal of refactoring was to improve SEO ranking (markup already uses main/section/footer/header and others), the main problem was the file size of CSS/JS. So using utility classes paradigm was certainly invaluable to attain those goals!
The only downsides are the initial know-how of the names of the classes you need to add to selectors to gain needed effect, but once you get it, development is super easy as you just need to add needed combination instead of adding new CSS. Lots of features being added after said refactoring did not require adding new CSS at all.
Another downside is that developer needs to maintain utility class hygiene as not to add new one which is used rarely.
Regarding production vs hobby projects. I think for hobby project dev can use whatever he wants, but as for serious production, maintainability is really important. It's much easier at least for me to do classic CSS with cascading, but maintainability is non-existent there as speed is the king there and code duplication is all over the place. With utility classes maintainability is kept at high level by not introducing new CSS all the time. The bigger/longer the project, the more sense to use utility classes on it.
I think OP's point is something along the lines of "knife is being used to kill people therefore knife is bad and should be banned". Every tool can be misused, but if used wisely, it can be of invaluable help.
Either way, these are my 2 cents.
Cheers!
no.
i liked tailwind, it makes my work done much much faster.
especially in small teams.
using sematics tag to describe content?
yeah, thats a good idea, overusing div is not good for seo.
but i dont want semantic html tag to dictate how my site should look.
I agree with you that we tend to put too much classes in the HTML with these frameworks. I am not as strongly opinionated as you are but I think it make some templates harder to read with unnecessary styling logic.
But doing so is not the only way to use Tailwind CSS. There is actually a nice way to use Tailwind while setting most of the styling logic in a stylesheet with the
@applydirective.tailwindcss.com/docs/functions-and...
It needs a build step but most projects already have one. And it creates small stylesheets by adding only the CSS that is used.
One really big advantage of using this framework to manage our style is that it provides consistency. And that is also very important for the user experience. In my opinion, this is even a good enough reason for the using-to-much-classes tradeoff.
Thanks for the tip. But you may also want to take a look at the following piece taken from the official documentation.
Agree on your point about consistency. That is one of the things that is achieved using abstraction.
I understood they do prefer using utility classes. But it offers the possibility to create our classes as we would do otherwise if we want to. And we keep the advantage of consistency if we limit ourselves to using the Tailwind classes. It is way to frequent to define different spacing or colors everywhere otherwise.
I found this episode of JS Party interesting with Adam Wathan explaining why and how he got to do Tailwind : changelog.com/jsparty/155
It's a bit old and this may have changed since. Before listening to it I had the same discourse that utility classes everywhere were an abomination. It made me see another point of view and understand why it may have some value.
I would recommend listening to it to have his viewpoint at the time. We might not agree to everything but, at least, we get to see the problem at hand from another perspective.
Absolutely agree! Your comment is, indeed, very insightful and explain the reason why Tailwind, and other frameworks and tools that implement Atomic CSS exists, are popular, grows, evolve and have a huge ecosystem! Is not perfect, I realize that, but helps to solve a problem that CSS hasn't couldn't in the development community, specially in way that now we construct components to build pages and web applications using composition!
I just read some comments, it's a fighting game! 😲
However, I didn't know that TailwindCSS minimizes resources and removes unused classes. That's a good thing. 👍🏼
This is a bad take.
First off, CSS libraries like Tailwind have absolutely nothing to do with the semantic markup of the HTML content, so bringing that up is a totally moot point.
As far as "better SEO" and performance is concerned, Tailwind, out of the box, removes any unused classes from the bundled CSS file, ensuring that only the classes being used are loaded by the client, resulting in significantly smaller bundle sizes. On top of that, every class that is bundled is reusable from anywhere that shares that stylesheet. The entire point of helper classes is that you're not having to reuse the same style properties, and therefore reducing the overhead of multiple classes sharing the same properties.
I'm not even going to bother asking what you mean by this, because this is obviously just a random thought you had that literally has no legs to stand on.
This is just such a poo, lazy, and elitist counter-argument to using a framework that genuinely solves a real-world problem for a lot of developers.
Bootstrap IS like Bulma, Tailwind isn't. So comparing it with Bulma is pretty much the same thing.
But don't write what I didn't write, in no case did I compare Bootstrap and TailwindCSS. And why always compare 'tools'?
No, but it's always good to be curious and see how the tools are made.
And my comment can be confusing. I don't especially like Bulma because it adds things that, for me, are superfluous. And I greatly prefer to do it by hand.
And yeah I figured Bulma and TailwindCSS are pretty much the same content... but from what I see, this is not the case.
I just looked at the TailwindCSS site again, maybe I'll do something with it to see if I like it ! 🚀
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
I would prefer a design system to create a website/webapp from a small/hobby project to a full blow industrial project. Having a design system before starting on your HTML will always give you an option to choose the best possible solution out there that suits your requirements.
But if I want to pick a side, then I would choose sass/css rather than tailwind, simply bcoz it doesn't bloats my HTML/component/business logic.
I have nothing against using a design system. As long as it's accessible, meaningful and well suited to the type of content your website is meant to represent.
Using a component library, on the other hand, is a different story. One must choose a component library very carefully, or have enough expertise/qualified team to develop high-quality solution.
Tailwind is great.
If you don’t like Tailwind then a good alternative I would recommend is css modules with open props. Which is basically the complete opposite of tailwind.
Artis is a low-level and functional virtual CSS library with no CSS codes. More than 80 Utilities. Infinite Configurations. (artisjs.netlify.app) #virtualcss #virtualdom #javascript #cssinjs #csslibrary
This is silly...
I do happen to be comfortable with plain css and plain javascript.. however, as a full stack dev (that is also touching on AWS, and half a dozen other moving parts), I don't have the luxury of constraining myself to a design/presentation Silo. I do appreciate frameworks and libraries that help me build things.
Do my end users care if I use Tailwind, or Mongoose, or Next.js? Nope! I think each do a great job in their respective domains. If you want to be a purist and beat your chest about how you've mastered raw css, or sql, or dom manipulation, or some other specific, fine, more power to you. But can you do all of that, and still ship something in the same time frame as someone who can leverage tools? I'll leave it at that.
IMHO Tailwind utility classes are a nightmare in markup but is simply fixed by creating your own selector and then applying tailwind utilities to it. That being said, if you're just building a basic site its like bringing a gun to a knife fight and, as with all CSS frameworks, it concerns me that people aren't actually learning CSS itself, just how to manipulate a framework.
tldr; Tailwind is awesome and manageable but do yourself a favour and also get to grips with vanilla CSS
Your statements of what presentation layer etc. should and shouldn't do are great statements of philosophical purity. They are not pragmatic at that level of purity. You should work to retain them and conserve those ideals, but they will always be bent.
You did best! but not perfect, Talewind is a uitlity purpose tool it enables inline-multiple Css platform espcially made for enterprises design system, with inline-mulitple Css you don't have to work with HTML only you can build a custom Css and can use mulitple tailewind element in one class which helps you to structure your own required HTML
Is this like one of those "why you don't need react/vue/svelte in 2022" and goes on about how vanilla js can solve all your problems? Oh damn that's awesome but no thank you 🙏
I love the bitter comments below. Tailwind really isn't the way to go. using traditional CSS is the best route. most aren't willing to learn it but what's hilarious is by the time you learn all the tailwind class names etc you might as well be learning css
Styled Components are the best way to go imho. Sure it couples your CSS with JS but who really cares? that is an old archaic rule to keep it all separate. In this day and age of components and React-style JSX styled components is no doubt the best way to organize your code and split styling up by component. No one should build their website around pages... The Component approach is here to stay therefore styled components is the best approach
The advantages provided by Atomic CSS are extensive and reusable, but they still belong to libraries that in turn rely heavily on javascript to render HTML and classes. Also, some like Tailwind have made the big mistake of not making versions compatible (Tailwind 1 is not compatible with 2). Instead, vanilla CCS maintains its state without incompatibilities. As time passes, what we will have is more of an extended CSS with new attributes that will not break existing ones.
Another thing, writing Tailwind or writing vanilla CSS is just as productive or unproductive depending on one's perception, because writing Tailwind is just as unproductive as writing the hated styles.
whatever tool/framework you wan to use for your projects that fits your requirements, it is fine, tailwind is great, but please learn some CSS, sometimes you need just a few lines of code, no need to install the whole framework.
the same happens with javascript, people jump onto the hottest frameworks [ react, angular, vue, etc] that promise everything and that's amazing but as i say before sometimes less is more.
If your project needs a framework, then just use it.
pd: tools/frameworks like for example tailwind are basically a lock-in solutions but if in the future you plan to move to another tool/framework, you'll have a wondeful time to fix it.
Short answer before a more elaborated one: Twitter devs don't use atomic CSS either, that's the result of using React Native for Web: necolas.github.io/react-native-web...
I really enjoyed it, you explained it very well and completely👌🏻👏🏻👏🏻 Tnx a lot 🙏🏻
Talk is cheap! Give me sample projects to demonstrate beautiful semantic markup and the messy stylesheets you're hiding from us ;P
It's very hard to find such in modern days but these are a couple of more-or-less acceptable examples:
I recommend looking at some articles from Jason knight. Though his language is harsh his points and evidence speak for themselves comparing html css to tailwind
this kill the original post xD
If I'm using HTML classes "wrong", then I don't want to be right.
Tools are just that, and every developer should pick the best tool for their current situation. There are very few one-size-fits-all rules. The vast majority of the time we developers simply have to play the hand we’ve been dealt. That translates to picking prudent battles. Sometimes we simply have to hold our nose, get the job done, learn the lesson, and live to fight another day, hopefully avoiding poor choices (tech debt) in the future.
"For enterprise projects that tend to scale vanilla HTML/CSS is the way to go."
Your ethics of using what it was created for is too obsolete. Also, if you're having trouble using tailwind because it looks too clunky aesthetically to your html view, it might not be for you, and it doesn't mean others have the same problem.
Nor that, well structured, it is scalable "for enterprise". Nowadays there is modularity, for example something called react, have you ever heard it?
This should be the article.
I can't see how would you miss any of the mentioned benefits by using Tailwind 🤷
Excellent point
No what what's said, for me, it's Tailwindcss anytime anyday.
Fucking thank you.
asdfsdfsdffeeeeeeeeeeeeeeee
The ratio tells everything
There are many ways to build a website. Say yes to what tools work for your requirements.
composition is great. i have yet to find a css library that makes css easier ro maintain. they all make css more complex and intricate.
no. tailwind is like cheating and it makes it a nightmare to truly build a fully customizable styled components
Say yes to tailwind, is perfection
Whether the author likes Bulma or not, this is not where I thank him. It's the fact that classic CSS does the trick.
And in no case I'm talking about Bootstrap, why compare at all? 🤔
Nice article, I was about learning tailwind but with this . I think I need to focus more my CSS
Consider this avabucks.it/
Very good article, appreciate it.
Tailwind is just a tool for people who don't know how to work with css scss etc, a quick fix to lack of skills