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
Top comments (19)
Daisy UI looks really nice.
Tkx for sharing
Thanks!
Glad you liked it
hmmm...for me i had heard about tailwind a lot. but I didn't dive into it cause as you had mentioned it takes a lot of understanding of CSS. I would question on do i really need it especially there's packages making it harder to build or tools to learn to build it.
The answer will always be "it depends"
For me it makes sense as I really like the purge of CSS and don't want to deal with it myself.
here is mine wickedblocks.dev/!
Oh darn Michael
How did I miss this one!
because we are humans!! ππ
yeah right. right tool for right job
Always consider which tool solves the problem best π
The best Tailwind UI library or components Iβve used so far is Kutty. In my own opinion, itβs easier to customize than daisy ui
Nice sounds like a great one! π
Great article, I agree with your state, if you know which CSS property you want to use, tailwind classes save a time.
I like their documentatiom, easy to find what I need.
Exactly!
If I didn't know the ins and outs of CSS I would be super lost to be honest.
Sounds good
Tailwind discovery for my
Awesome!
I primarily use Tailwind for it's predefined colours and generic sizes of margins, paddings and stuff, which "just work", 'cause I'm really bad at it π
Yep! You don't have to be a designer to make beatifull stuff.
It really helps me a lot as well.
Even using it while need for writing custom css in bootstrap lol.
Same here. All I did was to prefix tailwind class names to avoid any conflict. Eg, bootstrap: mb-3, tailwind: tw-mb-3