My honest opinion on Tailwind CSS
I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
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
