I’ve written quite a few articles about Tailwind CSS and would like to give my honest opinion about it.
There seems to be a big divide between those loving Tailwind and those not loving it.
This 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
You have medium to a good experience in building websites with plain CSS, you will most likely know what you want to use.
For instance, all the styles are already in your head when creating a header. You 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, and 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 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 the same kind of website. But this is not true at all.
Even though Tailwind has uniform classes, every website built with it is different.
And besides that, you can always add your 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 work
I’ve always found responsiveness a pain, but it’s been a breeze since switching to Tailwind. You’re always only a couple of 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 for modifying elements.
Choose what works for you
As always, it’s essential to evaluate what works for you. 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 a particular person for the right job.
Because not only should tools enhance our workflows, but they should also make us, as the users of them, make them 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
