DEV Community

Cover image for My honest opinion on Tailwind CSS
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

My honest opinion on Tailwind 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

Discussion (19)

Collapse
sm0ke profile image
Sm0ke

Daisy UI looks really nice.
Tkx for sharing

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks!

Glad you liked it

Collapse
steelwolf180 profile image
Max Ong Zong Bao

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.

Collapse
dailydevtips1 profile image
Chris Bongers Author

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.

Collapse
mike_andreuzza profile image
Michael Andreuzza

here is mine wickedblocks.dev/!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Oh darn Michael
How did I miss this one!

Collapse
mike_andreuzza profile image
Michael Andreuzza

because we are humans!! πŸ™ŒπŸ™Œ

Collapse
tanth1993 profile image
tanth1993

yeah right. right tool for right job

Collapse
dailydevtips1 profile image
Chris Bongers Author

Always consider which tool solves the problem best πŸ‘

Collapse
nanaaikinson24 profile image
nanaaikinson24

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

Collapse
dailydevtips1 profile image
Chris Bongers Author

Nice sounds like a great one! πŸŽ‰

Collapse
smetankajakub profile image
Jakub Smetanka

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.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Exactly!

If I didn't know the ins and outs of CSS I would be super lost to be honest.

Collapse
valeri profile image
valeri

Sounds good

Tailwind discovery for my

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome!

Collapse
shrihankp profile image
Shrihan

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 πŸ˜…

Collapse
dailydevtips1 profile image
Chris Bongers Author

Yep! You don't have to be a designer to make beatifull stuff.
It really helps me a lot as well.

Collapse
tanzimibthesam profile image
Tanzim Ibthesam

Even using it while need for writing custom css in bootstrap lol.

Collapse
nanaaikinson24 profile image
nanaaikinson24 • Edited on

Same here. All I did was to prefix tailwind class names to avoid any conflict. Eg, bootstrap: mb-3, tailwind: tw-mb-3