This content originally appeared on DEV Community and was authored by Abdur-Rahman
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 👋.
This content originally appeared on DEV Community and was authored by Abdur-Rahman
Abdur-Rahman | Sciencx (2022-01-22T20:58:15+00:00) CSS 3 VS Tailwind CSS. Retrieved from https://www.scien.cx/2022/01/22/css-3-vs-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.