I've used TailwindCSS for two of my projects and I gotta say, I'm loving the utility-first paradigm. Tailwind just takes away some of the pain behind writing CSS, especially when you're writing repeated set of styles. For example, my projects are "flex-heavy" with a little bit of grid. So I end up writing a lot of flex properties. You can use mixins in CSS preprocessors like Sass or Less but I just like how flexible and easy Tailwind is. I'm still surprised by how little custom CSS I'm writing because I'm using Ant Design and Tailwind together. It makes customising the components to fit your brand very easy.

I do fear that it'll get unmanageable when the project gets bigger. For example, I sometimes end up with a long string of Tailwind classes in some of my components. It is possible to write wrapper classes for recurring patterns of class names. I still haven't had to do it yet, since I'm still in the early stages of this project.

I also love how quick it is to prototype something AND make it look good. I had to jump through a few hoops to get it working with Ant Design though. There is a trade-off since they are both compiled differently. Ant Design uses Less and compiles it to CSS but Tailwind uses Postcss. So there will be trade-offs if the component library you're using or your stack doesn't use postcss by default. I might have missed something in this regard but at least from the documentation there wasn't a straightforward way to set it up. So because I wanted to use both, I am missing autocomplete for tailwind classes. It also took a bit of time to identify and fix all the issues and get them to work together.

It’s really great for small projects you want to get done fast.

But once you go down that rabbit hole, it’s hard to refactor if that I’s something you want to do in the future.

I've only played around with it a little, but really like it. I'll probably use it in future projects.

One disadvantage to utility first is one school of thought thought that CSS class names shouldn't describe the style. For example, don't name a class "blue-button". What if you want the button to be green later? I've heard of this from the early days onward, and it's still perpetuated today. I have never felt comfortable with that idea and have broken it thousands of times for myself, so this isn't much of a disadvantage to me. It might be for some who who strictly follow such rules.

Could someone explain why to use Tailwind over Bootstrap? As a long time Bootstrap user I can simply say it works, so why change?

Hi!

I just tried it yesterday. I'm working on an Ember app and started it doing my own styling, however, I'm in the point where I just need to focus on making it look good and writing styles is very tedious and time consuming. Also I'm a backend developer xD

At first I thought of Bootstrap but the pal who advised me to use Ember also suggested using Tailwind CSS. He was right twice.

It's very weird to write so many classes in the class attribute but it's just great I don't have to spent so much time writing all those styles.

I just have to use them. Wonderful.

Going to be honest as well. When I first saw Tailwind CSS I was really against it. Why so many classes? But now, it made all sense to me.