I've been using Tailwind CSS for roughly 3 years now, and it is currently my go-to solution for starting a new project. As for any of my favorite tools, I love recommending them to other fellow developers. Thus over the years, I've engaged in many conversations discussing the pros and cons of using it.
The following is a collection of statements I've encountered and my stance on why I think they are not justified.
Let's start with my backstory of how I learned about Tailwind. In 2018 I decided to volunteer for a project to gain more experience building things for the web. My CSS knowledge back then was mediocre at best, and therefore I didn't enjoy participating in styling the frontend. Soon after, the project's management wanted a fresh look. One guy suggested: "Let's use Tailwind for the refresh. We use it at (name of one of the biggest companies in Germany) and we love it". So I took this opportunity to learn to style for real this time.
So what was the experience of learning CSS with Tailwind?
Spoiler: It made me understand CSS more
The reason why I didn't know much about CSS was that it just felt uncomfortable to learn. I would consider myself as a person who has a lot of grit when it comes to learning new things, but I kept getting frustrated about figuring out where to put which property to make things work. Utility classes just eliminated this issue for me because you directly see what styling affects which element. When it comes to learning new things, the initial step is the hardest, and I think utility-first played the leading role in making it click.
Another point I would like to bring up is to figure out how to learn to make things look pretty. Most of the modern web has styling hidden behind hashed class names which may be more performant but are super intimidating for a beginner.
Especially for Tailwind, there are tons of resources to learn from. High-quality open-source projects like Vercel's commerce, component platforms like tailwindcomponents or if you prefer videos the Tailwind Labs YouTube channel. There are also tools like Windy, which allows you to transform page content into Tailwind-styled markup to get a better understanding.
Personally, readability has never been an issue for me to begin with, but starting from v1, Tailwind has seen massive improvements in this regard. At this point, it feels like writing CSS properties in a kebab-case syntax.
Some people have also raised concerns that switching to utility classes for too long will make their vanilla CSS suffer. From personal experience, I can say that I worked on projects that only use CSS-in-JS libraries and I didn't face any issues transitioning over to writing regular syntax.
CSS-in-JS is often praised as the solution when I ask people what they are using instead. Whether or not to use CSS-in-JS boils down to preference, but be aware you can use both with libraries like twin.macro (I will mention why you would want to do that later here). As for my part, I find it easier to modify my styling without jumping around my component's file.
Bloating the HTML by eliminating the separation of concerns is a trade-off. But what are the alternatives that work better? All I can say that I just love to get an idea of how something looks by just looking at utility-flavored markup. Using components also makes this issue and the hassle of refactoring way less relevant than people make it out to be. It just takes a different approach that admittedly takes some time getting used to.
I can suggest taking a look at Tailwind CSS Best Practice Patterns and Robin Malfait's Good Example to get an idea of how that would look like. For consistency, I can also recommend having a convention for class ordering or using headwind as an opinionated class sorter.
Fortunately, this won't be an issue anymore, and you can already opt-in today! Tailwind Labs has released a Just-in-Time (JIT) preview, which allows you to inline arbitrary spacing and color values for "single-use-values". Don't overdo it though.
I mention this since JIT mode is still in preview but will eventually eliminate this issue as well. Tailwind generates lots of classes, so you need to strip out the unused ones for production builds. Back in older versions, this required setting up purgecss. Credit where credit's due it later was merged into Tailwind to make it even easier for people to get optimized production builds.
Tailwind was designed with customization in mind, and if you don't want to make a Plugin for it, nothing will stop you from adding a bit of custom CSS.
I often hear this from people who presumably never gave the framework a proper try.
The most value Tailwind adds to my projects can be summarized in two words: Design constraints
Using the ecosystem as a team will make you appreciate Tailwind in a scaling project as it's just so convenient to work with it. I think many people just get the wrong idea by looking at Tailwind's defaults. You can narrow down choices, or you can ditch them altogether. You don't need to keep names like text-red-500 and go with more generic terms. What does matter is that developers can adhere to style choices from one single Source of Truth. All that's left is to install autocompletion for the supported editors, and you will find yourself creating layouts at a huge pace.
Everything is a trade-off, and I won't force you to use Tailwind if you don't like it.
Will / is there a better solution? Maybe, but I think the resources and tooling are great (if not the best) right now.
Just give it a try. You can join the official Discord here if you have any questions.