My honest opinion on Tailwind CSS

PublishedNovember 26, 2021

•3 min read•View as Markdown

Chris Bongers

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.

Comments (19)

Join the discussion

krishna Kumar3y ago

It's a great article. I'm a backend developer planning to learn CSS framework should I go for it?

Jon4y ago

I would agree with your statement that anyone with less than a medium level of experience with CSS should not use it. Learning CSS first is definitely important if you plan to make any real progress in your personal growth.

Personally though, I just can't get passed the mess of classes. Yes, I know you can use apply, while that remove the mess from the HTML, it just relocates it to the CSS. It's still a mess. Seems like a real maintainability nightmare. Maybe in small to medium websites that won't be updated often, Tailwind could help to speed up development. But for larger apps that are in continuous development, Tailwind seems like a real headache

Chris Bongers4y ago

Are you using components?

Because if you are this argument is completely gone. We use it at a large scale over at daily and never had any headaches around tailwind.

I would agree if you re-use and have to modify it in multiple places it's one big mess.

Hence it really thrives in component based systems.

Bruce Wells4y ago

I have been a user of Foundation since 2015. It seems to do everything Tailwind does and more. So not sure what the big deal with Tailwind is. Seems late to the responsive CSS framework party. I guess new beats proven these days.

Chris Bongers4y ago

Not at all Bruce, I think you might have missed the premise of Tailwind then.

Foundation much like Bootstrap is a framework, it gives you a flavoured style packages.

Like your <Card> component, it's ready made.

In tailwind we only get utility classes giving us more freedom and less overhead.

Saying this, nothing wrong with Foundation, or Bootstrap, it just serves different purposes.

David Wampamba4y ago

Great piece.

IMHO, Tailwind looks to more relevant while developing with a JavaScript UI Framework/Library. What is your say about that?

Chris Bongers4y ago

It's more powerful when using component based frameworks. But even in plain HTML is can make a difference.

David Wampamba4y ago

Chris Bongers

I just don't know if its my computer or something but it installs successfully and gives me an error when I run $npm start command.

I was installing it for React and I followed the official documentation.

Have you ever encountered tailwindcss not found by craco

Kaushal Joshi4y ago

I have been using Tailwind recently and I can confirm this: Having intermediate knowledge of CSS3 is a must if you want to use Tailwind.

I had to brush up on transform/translate properties because it was difficult to understand them. A

Chris Bongers4y ago

Glad you agree on that one!

Ifeanyi Omeata4y ago

Great content Chris! I can see why Tailwind css is now demanded more as a skill in most companies.

Chris Bongers4y ago

Yep! it's in very high demand. Def worth picking up

Mike Jones4y ago

Another great Article a few things i don't entirely agree with but i suppose its personal opinions. the main thing for me was the "medium CSS" knowledge... for me it was a complete flip... i was useless with normal CSS and still am to a certain degree... BUT using tailwind and trouble shooting my issues etc i was able to see the CSS Behind the classes and learn a bit of CSS. I'm now happy enough that i can extend my tailwind config to include normal CSS which done with a few components on my log.

The responsiveness of Tailwind for Mobile Dev etc is just a dream so far i cant fault it.

another resource to add to your list is

https://www.wickedtemplates.com/ https://wickedblocks.dev/

i use both of these websites for my blog even though i have access to a tailwind UI account, the resources on those sites are incredible

Chris Bongers4y ago

Thanks for this Mike 🤘

I personally really think a good understanding of CSS will help. Else people will adopt wrong use-cases for solutions. *(but this is very opinionated)

Thanks for the extra resources! Need to take a moment to update them :D

Idris Olubisi4y ago

Thanks for sharing Chris Bongers

Chris Bongers4y ago

Thanks man! 🙏🎉

Zahab kakar4y ago

I really love the way you explained it, simple & useful. I like Tailwind but didn't use it till now. Thank you for the great article.

Chris Bongers4y ago

Thanks Zahab! 🎉🎉🎉

Yash solanki4y ago

Thanks for sharing your opinions chris🙌 I find tailwind amazing with responsiveness and web3 project quick prototyping is booting the use 🔥

Chris Bongers4y ago

100% is Yash! 🎉

More from this blog

I wrote 1000 articles, what’s next?

Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

Dec 22, 20223 min read

Vendure community and more

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

Dec 21, 20222 min read

Deploying Vendure

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

Dec 20, 20223 min read

Vendure - Overwriting email templates

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Dec 19, 20222 min read

Customizing vendure

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Dec 18, 20224 min read

Daily Dev Tips

887 posts

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

I've written quite a few articles about Tailwind CSS and would really like to give my honest opinion about it.

There seems to be a big divide between those loving Tailwind and those not loving it.

Which is fine, eventually it's all up to someone what works for them, and what they like to use.

Disclaimer: This is an opinionated article

When not to use Tailwind

In my opinion, Tailwind should not be used if you don't have medium experience with CSS in general.

Tailwind is a utility framework that can be used to optimize and speed up your development.

Suppose you are not familiar with how something would be set up in plain CSS. In that case, I personally think you might struggle to find the correct classes to use in Tailwind.

Why Tailwind rocks

Let's say you have medium to a good experience in building websites with p[lain CSS, you will most likely know what you want to use.

For instance, when creating a header, all the styles are already in your head. You just need to type them out.

Tailwind helps me in this process. I don't have to define all these little helpers classes to make an element a flex item.

Another big pro is that it makes things stricter. Their sizing, padding, margin are all proven numbers that work. So I don't have to go and think about what generic sizes might be needed.

Besides the ease of development, we recently got Tailwind JIT mode, making it even more powerful. We can now add any classes on the fly!

Tailwind also offers a purge mode, which cleans up your output CSS with only the classes you actually need. This purge process makes your end file as small as possible with only the classes you need.

Uniform, but yet so different

At first, I was afraid Tailwind would give us all the same kind of website. But this is not true at all.

Even though Tailwind has uniform classes, every website built with it is so different.

And besides that, you can always add your own theming layer to Tailwind to make it more unique.

There are also a lot of templates and elements available for us to take inspiration from and set up a basic structure.

Some websites with Tailwind inspiration:

There are many more out there, let me know what your favorites are, and I'll add them here.

Responsive and selectors just work

I've always found responsiveness a pain, but it's been a breeze ever since switching to Tailwind. You're always only a couple classes away from making a beautiful responsive layout.

And the same goes for hover states, group hovers, and all those good things!

A good thing to note is that Tailwind is mobile-first, so my general approach is to design the complete mobile layout and work my way up.

This way, you'll always have the correct flow in place for modifying elements.

Choose what works for you

As always, it's essential to evaluate what works for you. For me, Tailwind is a massive help, but for some projects, it's still overkill, and I write some custom CSS for those.

And if you tried out Tailwind and don't like it, that's perfectly fine.

There is always a suitable tool, for the right job, for a particular person.

Because not only should tools enhance our workflows, they should also make us, as the users of them, make it fun to use.

What is your opinion on Tailwind?

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Command Palette

Comments (19)

More from this blog

When not to use Tailwind

Why Tailwind rocks

Uniform, but yet so different

Responsive and selectors just work

Choose what works for you

Thank you for reading, and let's connect!