Discussion on "The Pros and Cons of TailwindCSS"

JD Lien · 2022-07-21T16:52:03.761Z

In the world of front-end web development, Tailwind has become the CSS framework that has taken off more than any other recently. Despite this, it has its detractors. The premise of Tailwind is that instead of creating a set of selectors and bespoke ...

The biggest drawback i've found with Tailwind is when creating reusable components. I've been working on a component library for use in our various projects. It seems to be overly complicated to make the components more customizable. It could just be my inexperience when it comes to Tailwind and Vue components though.

The funny thing about this is that I’d say it’s perfect for that. You might need to be a bit careful about what styles you add by default if you want them to be customized (eg, don’t specify a font size if you want to leave that up to the user of a component).

I think the easiest way to achieve this is to add !important variants of styles, so they will override the defaults. (Although this may be considered a poor practice, it works very well).

Might this approach help? It has worked well for me in the past!

Insightful article, Tailwind is so popular these days.

Awesome article JD Lien! There seems to be an article every week trashing on tailwind but it never tells the other side. Thank you!

Going straight to favs! You just used the words I can't when trying to describe why and why not Tailwind. I love it, and love your website too!

A little bit irrelevant to this article, but you have a lovely personal website!

Ha, thanks! I get so many comments on that, I should write an article about how I designed that :)

Thank you for an excellent read 🏆

Love this. Great article.

Thanks James! I appreciate the feedback and thanks for the follow on Twitter!

Thanks for great writeup. Curious to know what is the difference between TailwindCSS Vs Twitter boostrap ?

The main difference between Bootstrap and Tailwind is that Bootstrap is a component-based set of classes, which is a more traditional way of using CSS. For instance you have card components, button components, a jumbotron, etc.

Bootstrap does have some “atomic” utility classes, but for the most part, there’s a prescriptive approach to the design that intends for you to use certain components for certain elements.

One drawback of this is that it gives you a bit less flexibility (however, you could always customize it).

Tailwind uses much more simple and generic “atomic” classes that only do one simple thing well, and you make your styles by combining a bunch of these wherever you need them.

I hope that helps!

So I was reading the cons and thought you must be writing just plain CSS for all of your project?

Most of the time before I used Tailwind I did use vanilla CSS. Although I used Sass when it got more complicated. I'm not sure what you are thinking, but I don't think most CSS preprocessors change the game.

If you use a framework like Svelte, or Vue with scoped styles you can certainly minimize a lot of these drawbacks!

Thanks! I'm glad you enjoyed it.

Hi, remember that you can add Tailwind classes to your CSS files.

For example:

.card {
    @apply p-4 bg-white;
}

You can find more information on Tailwind docs page called: reusing-styles

Yep! This is useful to compose your own css components when you either have something reused so often that it'd be tedious to use all the atomic utility classes, or when you need to make your own styles for things Tailwind can't do.

Then you can kind of have the best of both worlds by using short, simple Tailwind classes in your stylesheet, and you don't need separate blocks for pseudo-classes and size-classes.

Granted, the authors of Tailwind don't recommend you use @apply heavily, as there are drawbacks of doing this. With most frontend frameworks you can extract complex or reused bits of code to components which is likely the superior approach.

Personally, @apply is a huge anti-pattern to me. @apply is just making classes again. If I need to reuse styling then my components are probably too big. Tailwind works great with Atomic Design.

But this ends up being a pretty good tradeoff, because the repetitive nature of utility classes compresses quite well at the transport layer used to transfer webpages, so the resulting different in data transfer speeds and page load performance is extremely negligible.

Do you have some resources where I could read more about this? I actually never thought about it and it sounds like and interesting topic to check.

Nice article, BTW. Telling this as a person rather reserved about Tailwind.

Yes, Sarah Dayan did a demonstration of this taking the homepage of Algolia (where she works) and converting it into CSS components. (Granted, not by hand, which possibly could be a bit more efficient). She built this project to do that:

github.com/sarahdayan/utility-first-compression-d…

In the video I linked to, at this timestamp (youtube.com/watch), she shows the differences:

Uncompressed Utility: 513KB Semantic: 442KB

Brotli Compressed Utility: 35KB Semantic: 34KB

So for a fairly heavy page, it ended up being a 1KB difference, or around 3% once compressed. Uncompressed the difference is much more significant, about 16% - but most webpages are delivered compressed on modern servers.

Thank you for throwing light on Tailwind. As a fairly new person in web development I have come across Tailwind CSS and have wondered what the fuss was about and why there was even a need for it. After reading this article I am finding myself more interested in Tailwind CSS. Off I go to watch a tutorial. Thank you again.

Tailwind is useful but don't let that stop you from learning CSS proper. Tailwind is an awesome tool when you start building complex projects.

Good luck!

Discussion

The Pros and Cons of TailwindCSS

Responses(17)

Recent in Forum

Search Hashnode

The Pros and Cons of TailwindCSS

Responses(17)

Recent in Forum