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 👋.
Latest comments (65)
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.
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.
why should i use tailwind. css3 i know very well.
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.
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
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.
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.
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
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
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? 😄