The Divide in Developer Opinions on Tailwind CSS

Balancing Personal Preferences and Professional Requirements in CSS Frameworks

What a week with Tailwind as Content! 🤪 I had a lot of discussions, and somehow, this topic became really interesting to me.

👉 Please let me know your opinion after reading!

Saying that we want to use a specific tool like Tailwind in our Tech Stack is an impactful decision, so we should make decisions regarding that aspect with special care. Decisions here are hard and costly to revert, sometimes even impossible to undo. As a Software Engineer, this shall remind you that we need to be aware and open-minded to understand everything to a degree that enables us to make good decisions.

Being open-minded learners and practitioners will help us understand better over time. In fact, being a practitioner is the hard part since it requires a lot of time. So, how do you make the right decision without practical experience? This article aims to provide you with both personal and professional insights.

I clearly differentiate between the personal opinion (amateur, ego, the love for it) and the professional opinion (business, outcome, team aspects, incorporation). I firmly believe that we should have both types of opinions and be aware of them to make objective decisions, not tainted by what we think.

So, let’s get into it!

Some Statistics about Tailwind

Tailwind CSS has seen significant adoption and interest in the web development community. As of January 21, 2024, Tailwind CSS had garnered over 75,500 stars on GitHub¹, indicating a strong following and usage among developers.

This high level of interest is further emphasized by its recognition in the State of CSS 2020 survey, where Tailwind CSS was awarded the title "Most Adopted Technology." This award reflected its substantial year-over-year growth in the category of technologies that users would choose to use again, marking a 17.8% increase over its 2019 figures. By the end of 2023, the State of CSS² reported that Tailwind CSS is closing the gap between the leading framework Bootstrap, when it comes to usage but already exceeded when it comes to interest, only topped by the newcomer Open Props³.

The following screenshot will tell us that ignoring the pros and cons of frameworks doesn’t help us at all. Resistance is futile. Instead, learning why these frameworks became what they are today makes sense. This is actually what I would tell the past version of myself 3-4 years ago 😀

State of CSS 2023 – Interest

State of CSS 2023 – Usage

State of CSS – Awareness

Source: State of CSS 2023 https://2023.stateofcss.com/en-US/css-frameworks/

Who is using Tailwind? And Who is Fighting It?

👎 During this week, I heard many voices say: Tailwind is for nothing; skip it; it will hurt you. As far as I remember, all contributors said they had 15+ years of developer experience, and I heard this at least 10 times or more. I was one of them some years ago. Overall, it seems to be a more conservative camp. Additionally, I saw a high focus on general specifications and operational problems with Tailwind, but it lacked on the tactical and strategic side.

👍 Conversely, there was a huge camp of pro-Tailwind CSS developers. Forgive me; I don’t have exact numbers, but this represents the State of CSS report. Regarding developer experience, this camp seems to be very mixed. However, I noted that Junior Frontend, Backend, and Team Leaders tend to be pro-Tailwind. There are underlying reasons for that, and I will return to them shortly. Here, I saw a high tendency to innovate and simplify work.

There seems to be not much of a middle-ground between these major opinions. Tailwind opponents tend to actively fight it, while Tailwind advocates seem to actively try to convince people to use it. Both camps do that by listing a lot of reasons for these things.

🍪 My Professional Opinion is based on what both camps have to say. There are pros and cons, and neither “camp” is totally “right.” The opponents of Tailwind CSS seem to have never made real experience long-term with a utility-based CSS framework, and arguments are often based on screenshots of bad Tailwind examples they find on the web.

An example of “bad” practice is pointed out often by opponents – valid or not?

Image from: https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-craftsmanship/

🍪 Personal Opinion: Looks ugly; who the hell is doing that? When I see this, I often start to doubt myself 😀

🍪 Professional Opinion: Those classes are (hopefully) aggregated and not chained like that in the IDE in the class attribute. Still, it’s a clear sign that Tailwind CSS isn’t made for complex UI Design approaches. This example does not exemplify what Tailwind was made for but is used as a generalization against it. It’s simply a very bad implementation and leads me to the question that needs to be answered:

Was this application based on the wrong pick for a CSS framework?

In all fairness, we have a typical over-engineering situation in this example. There is too much going on in a single element, which is, unfortunately, a common case for decades regarding CSS.

We can solve this by lowering the bar and rethinking the requirements and targeted quality as a team creating UI applications. This is not heresy; it’s simply that we need to build effective software that satisfies the user with a good experience, not create artwork by designers.

If it is still like an artwork and clients and stakeholders require complexity in design and styles, you should avoid Tailwind CSS – my clear recommendation.

About Simplicity: Junior Developers and Mixed Teams tend to love Tailwind.

The main aspect of using Tailwind is clearly the requirements and qualities set for the product. What do we need and why? More importantly, who defines what we need, aka the Quality we should meet during development?

CSS is powerful and tempting. We should remind ourselves that we aren’t the “Web designer” type of Developer anymore in modern software-land; our goal isn’t to push boundaries in styling. Keeping our goals in sight and knowing why we are building things are crucial parts of the software engineering profession. Our goal is to meet requirements, not over- and not under-engineer things.

Personal Opinion: I love to create great-looking, flashing UIs with CSS. Back then, I used Flash excessively for animating things, which is now possible with CSS. I want to push the boundaries, see what we can do with CSS today, and make it better than the last version.

Professional Opinion: I am an entrepreneur CTO and a state-certified media engineer specializing in Frontend Engineering. This combination helps me understand why we build software and what matters. Pushing the boundaries as an Engineer means creating an error-prone environment. Can we handle it and keep it resilient? Is it definitely a solid solution when delivered? Do we really need extra animations, transitions, and complex cascading? What benefits the company, the product, and the users? These aspects have led me to decide on Tailwind with success. If this is for you, the case must be determined by yourself, your context, requirements, and your team preferences.

Simplicity is where Tailwind feels at home

Yes, Tailwind is about simplifying the process of UI Development in a component-driven environment, which is an often-mentioned reason for using it and a great experience. I share this opinion but want to specify what “Simple” means.

It’s not simple per se; my context is about complex modern web apps (PWAs) with many UI Components and possible states. The simple idea is to keep the requirements for specific components to what’s needed and not what we could do for cool things. It’s not about impressing the user but providing a solid and decent application on all devices.

🍪 With this goal in mind, anyone who knows the history of HTML, CSS, and JavaScript should know that less is better.

Personal Opinion: Tailwind is a valid choice to meet Simplicity as a Non-Functional-Requirement (NFR/Quality).

Professional Opinion: After 3 years of using Tailwind in production in 10+ WebApps, I know that the quality can be met in the long term. Tailwind doesn’t “blow up” at some point; it’s actually vice-versa since it’s component-driven. Everything you do badly or well is only scoped to the current component – a Pro-Argument.

👉 Read my last article about the “Upper Ceiling of Complexity.”

The Conclusion Of This Tailwind Week

I was thinking a lot about the feedback of every contributor on LinkedIn, both from the opponents and Tailwind users.

What I can say so far:

Tailwind is a valid solution when the requirements and context fit.

Tailwind is not very well understood, both by the users and opponents. Which is concerning and a reason for many bad examples out there.

The Tailwind user base is huge. Everyone seems to have an opinion and touch-point.

Tailwind is not for complex UI styling.

Tailwind is combinable with CSS/SCSS, but it’s not recommendable. If you cannot see a full-Tailwind approach, pick CSS instead.

Tailwind will stay long-term; it won’t disappear anytime soon since its implementation follows the idea of CSS styling with a different type of application. It’s not CSS’s enemy.

Tailwind does help with maintainability in a component-driven approach as long as simplicity is a defined quality goal.

Tailwind can be an alternative for BEM (Block, Element, Modifier)⁴ Pattern for CSS.

The reason I believe to see why we have “Tailwind-Lovers”:

Tailwind reduces the distance between styles and HTML markup to zero. Which is a reduction of the "Connascence of Meaning" (CoM) and "Connascence of Position" (CoP). As a result, the capacity necessary to process the code as human beings is significantly reduced since the patterns of the atomic utility classes are easily recognizable to us. Again, Simplicity is a pre-condition here as well.

Final Thought For Today

Is Tailwind so bad? I don’t think so. I am happy with my decision some years ago. Would I decide in the same context again in 2024 like that?

I thought about that for a while. Should I decide on CSS instead? BEM maybe? Open Props? The co-location of CSS and Markup is a huge operation, tactical, and strategic benefit I cannot ignore as CTO and engineer. So, in 2024, I would decide on Tailwind for the type of apps we build.

On Wednesday, we will have a live coding session on Our Tech Journey to demonstrate how to work with Tailwind in React.

Live coding with Tailwind and React with

Denis Čahuk

.

📆 𝗪𝗲𝗱𝗻𝗲𝘀𝗱𝗮𝘆 𝟮𝟰𝘁𝗵 𝗝𝗮𝗻𝘂𝗮𝗿𝘆 2024 16CET | 10am EST | 07am PST

Thank you so much for reading!

Adrian 🍪

---

Find me on MentorCruise.com.

1. https://github.com/tailwindlabs/tailwindcss

2. https://2023.stateofcss.com/en-US/css-frameworks/

3. https://open-props.style/

4. https://getbem.com/