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 weeks article, peeps. We would be discussing a topic that should not be discussed π, CSS vs Tailwind CSS. A lot of confusion has been going on in frontend communities about what to learn, whatnot and "why" Tailwindcss is a better CSS 3 and a potential replacement.
I already learnt HTML
I don't wanna learn CSS because of Tailwind
I don't see the point of learning CSS when a better version (Tailwind) is already there
-Anonymous Dev
Tailwind should replace CSS, CSS is just long and boring while Tailwind is interesting and the same thing
-Anonymous Dev 2
These and other similar texts I have come across are numerous (and equally triggering) and common amongst new web developers which shouldn't be. Let me break down what CSS and Tailwind is, and why comparing them is a crime.
π© The calm before the storm:
π CSS:
CSS stands for "Cascading Style Sheet". Cascading style sheets are used to format the styles, format and layout of any document written in a markup language. In simple language, format and layout of Web pages, they can be used to define text styles, table sizes, font styles, and other aspects of Web pages. CSS helps Web developers create a uniform look across several pages of a Web site. CSS is used for formatting other aspects of Web page layout as well. CSS is a programming language.
CSS came in 3 different versions, CSS level 1 published in 1996, CSS level 2, which was an improvement on level 1, was released in 2004 as a candidate recommendation for W3C and CSS level 3 had its first draft published in 1999!
π Tailwind CSS:
Tailwind CSS is described as a utility first CSS framework. First released in May 2019, Tailwind has become the most popular CSS framework out there, boasting over 261k developers using it to enhance their design systems.
Utility first frameworks provide low-level utility classes to build out custom designs within your HTML file. Utility classes are named according to their intended purpose, such that theyβre easily understandable to the average person (most times). They tend to have a small, specific purpose and can be used across your app easily.
<div class="text-white"></div>
πͺ Tailwind VS CSS
The first point to make here, Tailwind cannot be compared to CSS on several bases.
This post is like a "React vs Javascript" conversation, one is a language, while the other one is a framework. A fundamental understanding, not just in programming, but in other fields as well, is that the core basics are always learnt before moving on to the secondary topics. You always build a foundation before building a skyscraper, no matter the size or height. The same ideology can be applied to this issue as well, Tailwind is a utility class while CSS is a stylesheet language.
The purpose of having a utility first framework is to allow a developer to develop custom user interfaces faster, and also allow developers to build components easily.
Another reason is due to the fact that Tailwind is one of tens of CSS utility first frameworks out there. Based on this, what would be the next argument? You should learn how to use those frameworks and forget all about CSS? Tailwind doesn't teach the basics of styling, in my own opinion, it doesn't even teach anything. It delivers functionality to a developer, but without background knowledge of how it works, a developer would never understand the full implementation of that functionality.
TailwindCSS is very popular and has a lot of advantages for experienced developers who just need utility classes to quickly build beautiful custom designs and move on to other aspects of their application, while it isn't bad (per se) for someone who just finished learning HTML to learn Tailwind, I think it is bad to shun CSS or to try and compare and contrast. Learn the basics in everything you do and it would save you a lot of frustration and agony. TailwindCSS is not and would never be a replacement for CSS.
Thank y'all for reading, I hope you got an extra point or two from this article to tell those who like to argue without doing any research π. Your feedback is welcomed. Like always, happy learning and make sure to always have fun in whatever you learn. Like seriously, spice it up! Till next time π.
Top comments (64)
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.
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.
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
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 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 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.
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 π.
Sounds like saying "I don't want to learn Javascript because of React" to me.
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.
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.
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
Why on earth people should prefer utility-first library that just ruins the html.
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 π. π
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? π