Disclaimer: I don't want to engage in the drama. I just think it's important to share experiences to help people make a choice.
Prelude
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.
“Tailwind is for people who don't want / are too lazy to learn CSS”
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.
“You need to learn the syntax and neglect vanilla CSS”
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 (see Tailwind adds no value and does not scale on why you would still want it). As for my part, I find it easier to modify my styling without jumping around my component's file.
“Utility classes make the HTML look ugly and refactoring harder”
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.
“Building pixel-perfect designs takes longer”
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.
“Tailwind builds are slow and require extra tooling”
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 does not provide XYZ”
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.
“Tailwind adds no value and does not scale”
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.
So should I use it?
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.
Top comments (12)
I don't particularly have a problem with Tailwind provided you don't do this. You don't have to, since it compiles down to regular CSS like every other tools does. If you write simple semantic markup and
applyutility classes in the CSS part, you don't need to bloat your HTML.The problem is, that's not an improvement on how people do CSS in the first place, and it's also not how people use Tailwind in the real world.
I do agree
@applygets rid of the benefits, and this is why you should avoid using it. It is openly discouraged to be used by the author. However, it comes quite in handy when you need to style something globally.I actually use
@applyunder two situations when I don't want people to easily copy of my design from just looking at HTML and second when I have conditions like the one Adam showed related to lists of similar element. I would probably make a new component and then apply scoped css using selectors on it with@applythis prevents the bloated HTML. I am doubtful though whether HTML vs@applywhich one will bloat my css.IMHO thanks to Tailwind someone who doesn't know CSS can learn it much faster thanks to great documentation. I am also using this lib for about 3 years now and I recommend it to everyone.
I'll reiterate a general theme from some of the other commenters. The issue is not the tailwinds, the issue is people are not learning how to write CSS by hand. All of these frameworks are great, until you have to do something custom or you have to work out UI bugs that are caused by said frameworks.
At the end of the day this really just comes down to preference. I write CSS by hand and enjoy doing it. I also pull from my own component cache because I have full confidence in that code. I know others that will not deviate from some of these frameworks because they hate writing CSS and don't have the aptitude for it. The important thing, especially when you're working with the team or knowing you're going to hand this project off to somebody else, is to make it digestible by another developer who has no clue about the tools that you're using.
Thanks for sharing your thoughts Brendan. I'd like to comment on some things.
I don't think this is the case. Since Tailwind is just an abstraction over CSS, you still need to understand the fundamentals at some point. Need to apply global styles? You learn about selectors. Need to support more than light / dark mode? You learn custom properties. The path of learning may look different but at the end of the day, it matters that you start learning in the first place.
Besides that, Tailwind also teaches you properties that most other developers don't even know. Examples for that would be blend_mode and font_variant_numeric.
Tailwind is laid out entirely for customization, so I don't know which part you cannot customize with it. Regarding UI bugs, I think it reduces them because you can directly read the styling from the HTML in PRs. If you set up PostCSS you get tools for prefixing which help you avoid browser-specific bugs. Framework specific bugs? I yet have to encounter them. Remember it's just an abstraction of CSS, so chances are you found a new
IESafari bug.When it comes to styling there are always different tools that come with a certain learning curve. All that matters in my opinion is that it is done consistently. I'm glad you have found a solution that you feel comfortable with.
I mean, use whatever suits you best, right?
I like your article. You're writing very differentiated and there's nothing wrong with your arguments.
What's bothering me is that frontend developers feel the urge to take a side for or against tailwind like it's some sort of religion. It's not! It's just a tool :)
I can see how tailwind can be a great utility for any style of app or website. It just depends on your team. If you decide to use it chances are, you might know its benefits and (probable) drawbacks.
If you don't like tailwind, don't use it. That's okay, too.
For myself, I'm not a great fan of it. I just enjoy a clean and DRY codebase with semantic class names (BEM or whatever). But, I have also used tailwind quite a bit to rapidly prototype UIs and really enjoyed the process. Eventually, I still might "convert" back to "traditional" class names but that's my personal decision.
My point is, just because people are taking a stand for or against something (especially if it's "just" about some nerdy developer tools) it's still possible to use the best from both worlds. If you can work with it, that's great! Whatever makes your day easier!
As for the argument that you won't learn vanilla css "the right way" if you use tailwind I just remember back to the good ol' jQuery days! Back then, jQuery was the evil js framework. If you used it as a beginner it would be harder to Lear "real" Javascript, they said. Well, what should I say, I used it heavily as a beginner and I don't feel like I didn't learn the Javascript basics. It was just a great entry into web dev back then even if I wouldn't dare to use it in a project today :)
There is no such thing as a "best" tool for something as that would be a highly subjective standpoint. Maybe, for you, it is the best around there. For others, there might be other alternatives.
Long story short: thank you for a great article about why you chose to use tailwind. This might help others to decide which tools to use.
Thanks, I really appreciate your feedback.
i'm using Tailwind in two side projects and i can say that... since i learned CSS more than 8 years ago... it is like a shortcut to write CSS without having to create a .css file and plus, make your html looks like a mess, and you can get lost on it quickly. i'm wrong? then try use it without componentization. make a plain page with it. make a whole website with it. like those templates from themeforest. it will become a hell. my suggestion is: stick with the roots. plain CSS and BEM as convention.
1) Tailwind requires you to create a CSS file
2) Humans can only parse information to a certain treshold. I think non-component based approaches make scaling messy, and if it stays a simple page the additional classnames are tolerable for me. Templates can be a hit or miss. If they are extensively commented like the ones you get from TailwindUI, it feels okay to me.
3) Use what works for you. I don't think it is a bad idea to avoid abstractions, but conventions are often disregarded if not enforced. Tailwind just scaled well with teams for me.
thanks to the article. it really helped
How is PostCSS dead? There’s regular releases on GitHub.