'Tailwind CSS 🌀 vs Vanilla CSS 🍦 – Which One Should You Use? 🤔🚀'

In this video, we put Tailwind CSS 🌀 and Vanilla CSS 🍦 head-to-head! Which one is faster? Which is easier to manage? 🤔 I built the same UI element using both and timed the process ⏱️. Watch as I share the pros ✅ and cons ❌ of each, and find out which CSS method might be the right choice for your next project! 💻✨

Let me know in the comments what you prefer: Tailwind or Vanilla CSS? ⬇️
Don’t forget to like 👍 and subscribe 🔔 for more web development content! 🚀

[ThomasGiles]

To be honest I have not used Tailwind or any of those CSS frameworks. So I'm just going off of the video for those details and how it works. I have used regular CSS for years, however.

I feel like it's a better idea to actually compare those pros and cons. For each point, which is better--CSS or Tailwind?

Fully customisable. CSS has all the capabilities the browser provides. Tailwind (presumably) allows for all possible CSS as well (I'd hope), just with... different names? Which I would think will be confusing when using dev tools to debug styles, because you will be seeing real CSS, and debugging the real CSS if there are problems. (Maybe TW fans would say you will just never get problems using TW, somehow.)

HTML/CSS separation. CSS has this, TW does not.

Dependencies/setup. CSS can be in the HTML or in a separate file, your choice. You can use whatever tech and make whatever decisions you like about compression, bundling, etc. with no need for special tools. TW requires a kinda hefty extra file to be downloaded by the user for it to work. Perhaps there are tools that will automatically compress/bundle/cull unused classes from that file, not sure. But extra tools would be required to get to the point of being as streamlined as CSS.

Universal Standard. Yeah, as mentioned in the video, CSS has this over TW. But also as I talked about, you'll be working with real CSS in dev tools so if you use TW, you should probably learn CSS on top of that anyway if you want to be a solid front-end developer.

Faster development. Seemed to me like the 5 minutes difference in your test would come from adding those classes, for the most part. The actual CSS writing--especially with intellisense--is probably about the same as writing TW. So, for me this is a wash.

No file switching needed. CSS can also be written in the HTML file. The closest equivalent to writing TW with just CSS would be, writing inline styles directly onto the HTML elements. So in multiple ways, no file switching is needed either way. This is a wash.

Great documentation. MDN is widely used by front-end developers as a reference. In my opinion, it's great documentation too. So this is a wash.

(Class) naming conventions can get messy. The developer has full control over how messy names get, whether they use class names everywhere, or element names, or any other selectors. So this is not inherently messy; I would say that's on the dev writing the code. On the other hand I could say the TW classes can get messy in the HTML file. So to me, neither is inherently better than the other. So this is a wash.

Slower due to file switching. Switching to a different file takes, what? 0.1 seconds? And, as explained above, you do not need to write CSS in a separate file. So this seems like an invalid point to me.

Styling consistency requires effort. TW styling consistency also requires effort. The same kind and amount of effort as you're talking about, anyway. By the looks of it you're still putting in hex colour codes and pixel widths. CSS has always had the ability to select multiple things at once and set the same piece of styling to them all, which make it quite easy to have just on place to change a value and have it consistently apply across the page. Plus it has built-in variables now too, making this even easier. (I don't know if TW has some kind of variable thing built in to it, or if that would even be possible without precompiling.) Maybe there's some feature of TW I'm not aware of that wasn't highlighted in the video for this. But it seems to me CSS actually has the win here.

HTML gets cluttered. CSS can also get a bit cluttered, especially if you used inline styles too. But as TW can only be a bit ol' list of classes to so anything, and CSS could just get away with selecting by element names... CSS is better on this front, I agree.

Recognisable as "CSS". Looks like some TW names are pretty reasonable. Others are shortened or changed from their CSS counterparts, which does make it more difficult to translate. Plus the fact you'd need to translate at all when debugging, as I mentioned before, is a negative. CSS wins here.

Requires extra learning. Yeah, at first you may get away with just sticking in some TW. But over time, if you're serious about front-end web development, you should know what those classes are actually doing anyway. With CSS you're learning CSS. With TW you're memorising class names that are shortcuts to CSS, which you should probably also learn. The upfront cost is low, but so is the upfront cost of learning CSS too. But the long-term cost learning TW gets a lot bigger than just going straight to the source and learning CSS in the first place.

So overall, when actually comparing those summary points with CSS and Tailwind, it looks like CSS is as good as TW or wins, on every category. Which, honestly, I was surprised at, but that's how it's come out when I thought about each of them.