DEV Community

Cover image for CSS 3 VS Tailwind CSS
Abdur-Rahman
Abdur-Rahman

Posted on

CSS 3 VS Tailwind CSS

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 πŸ‘‹.

Discussion (62)

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Collapse
gibbitz profile image
Paul Fox

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.

Collapse
rangercoder99 profile image
RangerCoder99 • Edited on

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

Thread Thread
darkwiiplayer profile image
DarkWiiPlayer

That doesn't address any of the problems with Tailwind though

Thread Thread
rangercoder99 profile image
RangerCoder99

What problems is that?!

Thread Thread
darkwiiplayer profile image
DarkWiiPlayer

I think @gibbitz already explained some of them quite well in their comment

Thread Thread
rangercoder99 profile image
RangerCoder99

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.

    • Using a system like SASS with utility placeholders would compile into much smaller CSS

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 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.

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...

Thread Thread
gibbitz profile image
Paul Fox

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.

Thread Thread
tanzimibthesam profile image
Tanzim Ibthesam

Scss itself has a very steep learning curve

Collapse
valeriavg profile image
Valeria

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.

Collapse
mnlfischer profile image
Manuel

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.

Collapse
romeerez profile image
Roman Kushyn • Edited on

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.

Collapse
tanzimibthesam profile image
Tanzim Ibthesam

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

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Thread Thread
tanzimibthesam profile image
Tanzim Ibthesam

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

Collapse
gi_dev profile image
G_dev

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.

Collapse
dorianmaliszewski profile image
Dorian Maliszewski

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

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Tailwind SS is not an excuse for being bad at CSS

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.

Thread Thread
dorianmaliszewski profile image
Dorian Maliszewski

Sorry if I misunderstood your comment that was how I feel it πŸ˜…

Collapse
jakeprins profile image
Jake Prins

I can see you know CSS very well: darkwiiplayer.com/

(maybe give tailwind another try ;))

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Collapse
neoprint3d profile image
Drew Ronsman

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

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Not if you use CSS correctly, that's the point. Tailwind is just a collection of bad practices that help people avoid learning CSS.

Thread Thread
mnlfischer profile image
Manuel

a collection of bad practices? I dont get it.

Collapse
valeriavg profile image
Valeria

Here's a brand new technique, you can call it CSS-in-HTML:

<div style="color:white"></div>
Enter fullscreen mode Exit fullscreen mode

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?) 🀣

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Feels like we need a rewrite of this article but explaining the style attribute as a new CSS-Framework πŸ˜‚

Collapse
tw2113 profile image
Michael Beckwith

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.

Collapse
shafspecs profile image
Abdur-Rahman Author

So true, thanks for the feedback ✌

Collapse
andrewbaisden profile image
Andrew Baisden

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.

Collapse
umerfarooq69 profile image
Umer farooq

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

Collapse
moyohussein_92 profile image
Hussein AbdulQohar

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.

Collapse
organizedfellow profile image
Jaime Aleman

Another poorly written article by someone who had no clue what they're talking about.

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.

What & who are your sources? Did you conduct a survey?

Collapse
shafspecs profile image
Abdur-Rahman Author

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.

Did you conduct a survey?

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.

Collapse
organizedfellow profile image
Jaime Aleman

How much experience DO YOU have with TailwindCSS?

Thread Thread
shafspecs profile image
Abdur-Rahman Author • Edited on

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.

Thread Thread
organizedfellow profile image
Jaime Aleman

Personal preference ... it's good that we have so many choices.

Collapse
shafspecs profile image
Abdur-Rahman Author

Thanks a lot for your feedback 😊.

Collapse
neoprint3d profile image
Drew Ronsman

Just use both tailwind for when it can be done in tailwind and CSS when CSS is needed

Collapse
shafspecs profile image
Abdur-Rahman Author

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.

Collapse
tqbit profile image
tq-bit

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

Sounds like saying "I don't want to learn Javascript because of React" to me.

Collapse
bernharduw_66 profile image
Bernhard Gschwantner

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...

Collapse
shafspecs profile image
Abdur-Rahman Author

Thank you for your very informative feedback πŸ˜„. πŸ‘

Collapse
amir2mi profile image
Amir M. Mohamadi

Why on earth people should prefer utility-first library that just ruins the html.

Collapse
hemanthvijaywargiau17 profile image
Hemanth Vijaywargi

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.

Collapse
rangercoder99 profile image
RangerCoder99

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

Collapse
raekcya profile image
Rajesh Chaurasiya

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.

Collapse
gibbitz profile image
Paul Fox

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.

Collapse
yassinrian profile image
YassinRian

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

Collapse
ksengine profile image
Kavindu Santhusa

Use your favourite one. Don't argue with others. Both can be useful.

Personally I prefer CSS. But also tailwind is good.

Collapse
junihh profile image
Junior Hernandez • Edited on

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? πŸ˜„

Collapse
gi_dev profile image
G_dev

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.

Collapse
virajsingh19 profile image
Viraj Singh

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.

Collapse
junihh profile image
Junior Hernandez

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. πŸ˜‰

Collapse
gautamjha profile image
GAUTAM JHA

Dev 1, Dev 2 can think player is bigger than the game. you gotta learn what you need. Don't go with others opinion

Collapse
thecodepedia profile image
Thecodepedia

If you have any knowledge about CSS, then you can use Tailwind CSS. It is best and time saving.

Collapse
shifi profile image
Shifa Ur Rehman

The beginners can literally learn a shiet ton of things just from the comments here haha.

Collapse
wpsolutions2020 profile image
wp-solutions-2020

Nemmeno sapevo l'esistenza di tailwind πŸ™ˆ

Collapse
sinanyilmaz profile image
Sinan Yilmaz

It is really simple to me. Does it safe time? Am i productive? Yes, so i use it

Collapse
fatmax profile image
Max Levin • Edited on

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

Collapse
tanzimibthesam profile image
Tanzim Ibthesam

Comparing a style sheet with one of its frameworks not a good choice you will definitely learn CSS if you break classes of Tailwind