Hello there, I have been using TailwindCSS for some time now. Truth be told, I have become a fan of the utility-first concept. The frontend of Hashnode in one of the recent builds was completely ported to TailwindCSS.
Here are the two major benefits that I have observed personally:
Less frequent CSS cache cleaning: If there's a design bug, we update just the view and do not touch the CSS as it is still the same. Previously, we had to change the CSS version with every build to force clear the cache for all our users.
Faster UI building process: We spend less time writing the same set of CSS rules for every component. For example margin, padding, position, background color, etc. are all written, we focus on writing just the UI (or the HTML).
Have you tried TailwindCSS? What are your thoughts? What disadvantages do you find with "utility-first" frameworks?
It is one of the best thing happened to the CSS ecosystem. Have used it for one of my side gigs supportexamples.com with the combination of purgecss it's a killer for sure
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.
Amit Chambial
Full stack developer and a Maker
I was given some project in the office which needs to be built from scratch. I thought of trying something new. That day I decided to use Tailwind CSS in the project, though I never used it before.
One word AWESOME 🤯 !
Now I am using tailwind in my every project. I have also built a landing page template using it. 😊