DEV Community

Cover image for CSS 3 VS Tailwind CSS

CSS 3 VS Tailwind CSS

Abdur-Rahman on January 22, 2022

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...
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

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

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
𒎏Wii 🏳️‍⚧️

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
𒎏Wii 🏳️‍⚧️

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

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
𒎏Wii 🏳️‍⚧️

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

So true, thanks for the feedback ✌

Collapse
 
cezarytomczyk profile image
Cezary Tomczyk

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:

flex transition-all dark:bg-darkNight bg-white duration-1000 relative 4xl:max-w-11xl 4xl:mx-auto 4xl:shadow-xl 4xl:rounded dark:shadow-4xl 
Enter fullscreen mode Exit fullscreen mode

vs.

.chat-message
Enter fullscreen mode Exit fullscreen mode

It will take some time to realise that Tailwind actually doesn't make software development efficient, but rather the opposite.

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.

Because Bootstrap, for example, didn't have it? Hm...

Collapse
 
shafspecs profile image
Abdur-Rahman

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:

.chat-message {/* ... */}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
cezarytomczyk profile image
Cezary Tomczyk • Edited

@shafspecs

[...] in my opinion, are key differences between the two.

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.

[...] one key issue Tailwind resolved for some people is what you highlighted: chat-message {/* ... */}. 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 am not quite sure if I follow. Would you mind giving an example of the problem and a Tailwind solution to it? Thank you.

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
 
damianroiz profile image
Damian

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.

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

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
 
jjaimealeman profile image
Jaime Aleman

How much experience DO YOU have with TailwindCSS?

Thread Thread
 
shafspecs profile image
Abdur-Rahman • Edited

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
 
jjaimealeman profile image
Jaime Aleman

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

Collapse
 
shafspecs profile image
Abdur-Rahman

Thanks a lot for your feedback 😊.

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

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

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

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
 
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
 
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
 
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
 
jegangits profile image
jegan

why should i use tailwind. css3 i know very well.

Collapse
 
fatmax profile image
Max Levin • Edited

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
 
shifi profile image
Shifa Ur Rehman

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

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
 
wpsolutions2020 profile image
wp-solutions-2020

Nemmeno sapevo l'esistenza di tailwind 🙈

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