The first point to note before we even start the article is, This post is a crime. Now, let us get started.
🔰 Intro:
Welcome to this we...
For further actions, you may consider blocking this person and/or reporting abuse
So I'll be blunt, and I hope none of the Tailwind & Co. fans get too offended by this.
Tailwind is an excuse for bad developers to not learn their job. An overwhelming majority of people who hype up tailwind have just convinced themselves that there is any actual merit to the technology, when in reality that's just their own bias and laziness.
There's very few people that actually know CSS well and still advocate for technologies like tailwind; the rest are just beginners that prefer to buy into the lie that putting all the styling directly in the HTML is somehow better to get around having to learn another language (one that isn't even hard to learn).
The truth is: Extracting the styling from the HTML is, for many reasons, the better way of doing it.
Couldn't agree more.
Using a system like SASS with utility placeholders would compile into much smaller CSS and would provide a similar experience to beginners while leaving the HTML classnames more meaningful.
Tailwind reminds me of the pre-css world where all styling was done with HTML attributes repeated again and again in a nearly illegible mess of markup.
I see arguments constantly for putting styling logic and markup all in the same file with styled components and the like and I'm left to think of the adage about those who don't study history. There is a lot of hubris and ego out there that builds first before understanding how we got to the percieved problem to begin with.
Tailwind is a lot like Sass already, its utility classes with some helpers, however unlike Sass you don't have to write out everything.
And thanks to PostCSS you don't have to write that classes in the HTML you can make your own class and use the @apply line so your css file not got a ton of repeating code you can do far more on one line with Tailwind them you do with Sass.
You also not have to duplicate your selectors in your media queries blocks and many extra stuff like that you will be able to just handle more easy...
With smaller css files you can make changes faster and still got your pretty meaningful classes...
Also thanks to the JIT in the new version it's much faster then SASS overall or at least on my PC.
There is far more to Tailwind than you know, you may want to look into it before you type things like this... :D
That doesn't address any of the problems with Tailwind though
What problems is that?!
I think @gibbitz already explained some of them quite well in their comment
My comment just say how to fix all his issues with Tailwind?
First of all Bootstrap and TailwindCSS are every different like Tailwind don't come with it's own components... and the classes will not really change all that much over the years because they base on the CSS it self.
This is false thanks to TailWindsCSS JIT the files you export just got the css you need noting more, noting less... I would say it would be the same size or smaller... smaller if you disable the basic reset. This is not an issue anymore for some time now!
HTML classnames more meaningful.
Almost my complete comment is about not having to put any TailWindCSS classes in the html and that you can use it really easy in css it self with the @apply
Tailwind reminds me of the pre-css world where all styling was done with HTML attributes repeated again and again in a nearly illegible mess of markup.
One again this doesn't even come close to the pre-css world like style tags could not do responsive breakpoints, and Tailwind got a ton of this helpers.
I totally agree that styled components and all that other react css, and css in Javascript are just one huge mess! But this got noting to do with Tailwind...
What I'm describing above is basically a subset of bourbon (thoughtbot.com/blog/introducing-bo...) which predated tailwind. I could use that if I wanted something pre-written.
Wiring up post-css to allow you to to use tailwind is fine. I don't see much difference in writing a property definition in css/scss and writing the same as a shorthand css utility class referencing a library. In the end you should make your decisions based on the cost of supporting dependency management and specialized configuration to do what would come out of the box if you just wrote the rules in the codebase you control yourself.
Keep in mind that you build a site once, but it may get new features multiple times per year and with security updates, breaking changes may need to be adopted along the way. The more hands that touch an application the more training or detective work (if it was developed on contract) the team will have to do. This amounts to cost too. The closer you stick to core technologies the faster you can hire and onboard new team members and the easier it is to find and solve problems. I just don't see Tailwind as necessary enough to justify these costs.
We're all going to regret how complicated our build systems have gotten in the next 5 years. I just keep hoping that the law of diminishing returns will stop us from continuing to layer complications just to get a small gain that is outweighed or negated by what is required to support it.
Scss itself has a very steep learning curve
I think you did not work with large projects and big economic interests. The bundling and chunked css can be reduced to a minimum with defined css helper classes. The real world shows there is a gap between good designed components with modular css and none repeating css definitions and product owners who forces time to market. Another big issue are typescript definitions for css modules and the time it needs to be bundled in build processes that don't exists with inline css classes.
One point I can go with is to know css. You can't use correct css helper classes if you don't understand css in general.
The abundance of frameworks covered up how the web pages are actually working. Tailwind or not, styles are still applied to a tree or elements and renders are still the most expensive part of it all. Now to paint all the DOM elements with classes it needs to walk through the whole tree, unlike style tag declaration or limited selectors.
But then again, our machines are quite powerful nowadays, so we wouldn't notice any difference anyway so we use whatever is convenient.
And it's all fine as long as new developers also get to at least have an idea of how a browser makes up an interactive page out of text files.
Like everything, it honestly depends on what you’re using it for. I write CSS or SASS for web components and Angular, but I mostly use either Tailwind or styled-components for for React. CSS gives you really granular control, but tailwind gets you 80% of the way there without interrupting your workflow by having to navigate to your stylesheet and fiddle with your custom selector.
If I’m building a UI library or a website for a design forward company it’s CSS or SASS, but if I’m just cranking out a a corporate web app, I’m not going to bother. As long as it looks clean, I can focus on features and bugs.
Nope you need to know CSS and you can learn it by breaking Tailwinds classes. If you are to meet deadlines and do things fast with both frontend and backend Tailwind. Everything has a purpose just cause you know css well doesnt mean everyone using Tailwind is bad at CSS :p
That is not what I said. Maybe I could have made it clearer, but my point is not that there aren't people who know what they're doing and, for whatever reason, choose to use Tailwind instead of vanilla CSS. I don't agree with them, but I respect that they simply have different priorities and know what they're doing.
My point is that most of the people using and defending Tailwind do so because they don't want to learn CSS.
They cant get away without learning css and actually thats more like Bootstrap. You can even see the Tailwind classes and improve in css. Anyways for rapid prototyping its the most effective
Laziness is the mother of invention, beginners will screw up anything you give them, frameworks and libraries are not an excuse for bad developers to not learn their job.
Interesting to know what's the reason to blame a tech which you don't understand? I don't understand why many folks like to use styled components, IMO it's much more productive and easier to support styling with TW or with css modules. But I don't blame people or the tech itself since it's me who don't understand the benefits. And I even assume that there are benefits in styled components, just not for my use cases.
This post is doing a good job to explain that Tailwind is not a replacement, it's a framework to make it quick and easier, and not to skip learning of CSS.
I wouldn't say it's laziness in my case, but more about a lack of time or wanting to spend more time on the backend. If I am working on the front end only, then I would have the liberty of setting up sass and thinking up clever class names. But that's rarely the case.
I think you're wrong. Tailwind SS is not an excuse for being bad at CSS but in some cases it can speed up your development. When you need to be productive and keep a maintenable codebase TailwindCSS can be very useful. Make your own stylesheets can take sometimes (precedence, media queries, base styles, theming, ...) where Tailwind comes with all you need and you can start your development.
Every tools/languages has theirs usecases
And I never claimed that. I didn't really pay much attention to this in my comment but of course there's legitimate use-cases for Tailwind. My point was that an overwhelming majority of its users see it as a way of putting styling information in their HTML without having to bother learning CSS (other than its properties, which is not where the complexity comes from).
Whether tailwind should be used in general is a completely different discussion (which, I think, comes down to both preferences in code organisation and preferences about different progression curves), but that's not what I was talking about in my original comment.
Sorry if I misunderstood your comment that was how I feel it 😅
I can see you know CSS very well: darkwiiplayer.com/
(maybe give tailwind another try ;))
You can tell a person has nothing to say about a topic when they start complaining about websites that haven't changed in almost a decade.
I disagree how I see it y are essentially going to make another worse version of tailwind when you need to make your own styles in css for every project
Not if you use CSS correctly, that's the point. Tailwind is just a collection of bad practices that help people avoid learning CSS.
a collection of bad practices? I dont get it.
Here's a brand new technique, you can call it CSS-in-HTML:
It is still a bit limited (early days, you know) but it's very performant and plays well with JS!
Now, would you guess what side I'm on?) 🤣
Feels like we need a rewrite of this article but explaining the
styleattribute as a new CSS-Framework 😂You can't have Tailwind without CSS, you can have CSS without Tailwind.
You can't have React without Javascript, you can have Javascript without React.
So true, thanks for the feedback ✌
Old post, but the author didn't explain exactly what problems are resolved by Tailwind. clearly In my opinion, Tailwind is overhyped. With thousands of CSS classes in a single element, it is very hard to understand the semantics. Example:
vs.
It will take some time to realise that Tailwind actually doesn't make software development efficient, but rather the opposite.
Because Bootstrap, for example, didn't have it? Hm...
At the end of the day (in my opinion), it all comes down to preference and ease-of-use. I can argue that bootstrap didn't and couldn't do what tailwind accomplished because they had a very specific set of design principles when it came to their UI. If you wanted to step out of line or get creative, might as well
use pure CSS. This is not an argument for Tailwind, this is just me trying to point out what, in my opinion, are key differences between the two.
Code readability and coding styles differ between people, one key issue Tailwind resolved for some people is what you highlighted:
This introduces maintainability issues for some and being able to read your classes on the fly, scan them and picture the element almost immediately is one of the biggest pros of Tailwind. I also know the length could be an issue...
@shafspecs
Those aren't key differences. Bootstrap, Foundation, or the like have a basic, initial UI if you want to use it straight. They have full flexibility, and you can change anything you want.
I am not quite sure if I follow. Would you mind giving an example of the problem and a Tailwind solution to it? Thank you.
Tailwind is very good for putting together a quick website using a template. I still prefer to write raw vanilla CSS although its good to have the flexibility to use both. I would still encourage all beginners to get good at CSS before you start using frameworks.
I am a big fan of tailwind especially since the release of version of 3.0 but it should not be compared with CSS. The core attribute of a good developer is knowing which resource to use per task at hand.
Personally, nothing gets my creativity flowing more than a fresh .css stylesheet. It's like having a white canvas in which to create and focus solely on design. Although, I agree with the increased productivity of having embedded styles in html / react component, I see this practice as the response to get the "design stuff" out of the way to focus on maybe the logic of an application or complete a project in which design is secondary. These are valid reasons to use a framework like Tailwind. Also, I see CSS frameworks as tools that help evolve the language, since many of the features that they offer ended up being incorporated into vanilla CSS. Despite this symbiotic relationship, CSS will always be my go-to choice whenever I want my application logic to follow my design instead of vice versa.
Tailwind css for those developers who don't know css and its to learn, i think tailwind is not good, bcz tailwind css is like inline css we use same classes on multiple childs when ever we need to change few css so we change all the tags, in css we just change single line of code and here we go. Yes tailwind css is good for those ho don't want to learn css
Another poorly written article by someone who had no clue what they're talking about.
What & who are your sources? Did you conduct a survey?
Yes, I did. It happens a lot in Discord communities and on Reddit and Twitter. And from what I found out, they were mostly new devs who just finished learning HTML and were looking for something to go on.
My sources for this post were mostly comments and tweets I've seen myself.
A survey on wether this is a confusion amongst some new devs? or a survey on who thinks so and who doesn't? I didn't say it's a worldwide thinking, or something that's plaguing our communities, it's just a bit of confusion by some in quite a lot of dev spaces I've been in.
I don't think you got the objective of the article.
How much experience DO YOU have with TailwindCSS?
About a year. I used a lot of utility class frameworks and at one point, created my own, but I used Tailwind a more. I have actually stopped using Tailwind and decided to move back to writing modular CSS, it's personal preference.
Personal preference ... it's good that we have so many choices.
Thanks a lot for your feedback 😊.
I took the best of both thing. I am currently learning CSS3. But during the time i want to implement anything for practice. I look for a css property in tailwind and then use it. And yess... Tailwind do save me some time that would go otherwise in making breakpoint decisions, names. Etc... But still I would say I am learning css.
Why on earth people should prefer utility-first library that just ruins the html.
This is like Javascript VS React, Tailwind never can replace CSS3 like it's build upon it... and just gonna say it Tailwind CSS is to do something faster, I saw other comments about lazy developers not learning css... but TailwindCSS is just utility classes with some helpers it's not like Bootstrap you need to know css to understand it and use it correctly if you just copy random strings of classes it would be completely pointless
Well-written article! You nailed it by comparing to React vs. Javascript (yet many of the comments sound like triggered by the word "Tailwind" alone, but not having read your article).
I personally haven't tried Tailwind yet - I've come from CSS Modules to CSS in JS. A major benefit I experience is colocation of styles with the actual components. It's easy to remove styles with confidence even when working in a team, without the fear of breaking the app in production, just because someone else (or even your younger self) didn't follow the project conventions 100%.
I see the same benefit with Tailwind, and it adds in reasonable constraints to the mix, like scales for spacing and a sound concept for colors and theming.
True, with a thorough understanding of CSS you'll really benefit from a CSS framework like Tailwind. You'll have a much harder time without that knowledge.
But there's no prescriptive single way to learn technologiy - even with 0 CSS knowledge you may start with Tailwind, and you'll progressively get better at CSS too. There are many roads you may travel...
Thank you for your very informative feedback 😄. 👍
How can people use tailwind without understanding CSS? How is it an excuse to not learn CSS. That doesn't even make sense.
I use tailwind because i have to write so much less lines to do the same thing and that's it. I don't know where you get the excuse part.
Sounds like saying "I don't want to learn Javascript because of React" to me.
Just use both tailwind for when it can be done in tailwind and CSS when CSS is needed
CSS is always needed 😅. If your site is focused heavily on styles and UI, use CSS. If it isn't focused on styling and you just want to quickly scaffold (generate) the frontend, use Tailwind. That would save you time and resources.
Use your favourite one. Don't argue with others. Both can be useful.
Personally I prefer CSS. But also tailwind is good.
Let's start with @tw2113 comment, which in just two sentences summarized all the points made by the rest. Michael absolutely right, because in the end Tailwind is CSS underneath and you can write CSS without the need to use Tailwind.
So it is not reasonable to think that it is a potential replacement, because if SASS, SCSS, Less, PostCSS, CSS-in-JS or other techniques have not succeeded, I do not think that Tailwind is the exception.
Tailwind might later bring some feature to developers that becomes so popular that it ends up as part of CSS. So we see the variables ("var(--theclass)") that were taken from SASS and/or LESS. SASS and LESS became popular because they allowed you to write variables in which to store repetitive values, as well as the integration of functions, mixing, loops, and other features that made it easier to write CSS. By the way, those two consider themselves CSS extensions rather than replacements. 😉
A similar case happened with vanilla javascript and the arrival of "getSelector" and "getSelectorAll". Javascript didn't have element selectors as flexible as jQuery's ("$('...')"), which is why it became popular. It became so popular that many developers knew how to write jQuery pretty well but fail with vanilla javascript.
To close, CSS is defacto part of the browser. How can Tailwind (which generates CSS and is exogenous to it) replace something that is an integral part of the browser? 😄
See also Bootstrap. Huge 8 years ago for all the same reasons Tailwind is big now. When we had to maintain what was built easily with it, everyone stopped using it. I'd say the beginners 8 years ago learned enough to see this was a bad practice and convinced new developers not to do it. This is our job now.
It's not easy to do things the right way, but that doesn't mean you shouldn't. If you prefer the mouse to the terminal, go into project management or design. Developers are paid to work hard and understand things, if you don't want to do that, then don't be a developer.
Dev 1, Dev 2 can think player is bigger than the game. you gotta learn what you need. Don't go with others opinion
Haters gonna hate every new tech that they're scared to learn. I've been using tailwind css for last 2 years. And it easily saves around 1 hour of development and debugging time. There were people who opposed scss too when it came out.
I think you're not seeing clearly where the problem is because you're focusing on the technology. It's not about which technique is the best, it's about which technique I feel most comfortable and productive with.
The post tries to push a technique ("Tailwind") and in its argument says that it is a potential replacement for CSS. Nothing could be further from the truth because Tailwind uses CSS underneath, so how to replace it?
So Tailwind is just another technique for writing CSS. If your argument is based on technology, when some alternative comes out that uses AI to write CSS, then for you that will be the new technology that everyone will hate even if for you it is the technique that makes you most productive.
But your argument fails because that is yet another technique, just like Tailwind, Less, SASS or many other names that are out there at the moment. 😉
I would even say with the recent development in CSS...we don't need css frameworks anymore...Flexbox and Grid and other CSS tooling makes CSS amazing...without the overly complicated frameworks
p-3 will always be faster than .time-wasted-thinking-of-classname { padding: 0.75rem; }
Tailwind purpose is not to replace css but to allow you to quickly build a site without switching back and forth between your html/css/scss files every few seconds.
sudo pacman -S lynx
Case closed!
If you learned to put value to your content instead of add make-up, the world would be a better place
Nemmeno sapevo l'esistenza di tailwind 🙈
It is really simple to me. Does it safe time? Am i productive? Yes, so i use it
The beginners can literally learn a shiet ton of things just from the comments here haha.
why should i use tailwind. css3 i know very well.
Comparing a style sheet with one of its frameworks not a good choice you will definitely learn CSS if you break classes of Tailwind