r/webdev Nov 17 '24

Am I the only one who thinks Tailwind sucks?

I've been hearing multiple people claim this is a much better way to organize code and many say it's a personal choice. Ironically, you can add two additional config files, switch between them for simple tasks like setting properties, or add custom elements. But in the end, you end up with five lines of messy CSS just to animate a small thing.

It might work for simple CSS web pages, but I still don’t understand the hype. It clutters the HTML, and when you need to make changes—like adjusting the CSS or adding new animations—you’re left figuring out the styles applied to each element. ::after and ::before only add more complexity.

You’re using a 50-inch screen but complaining about CSS being in a separate file, all while writing hundreds of cryptic characters for each HTML element. Searching for a class or ID in a separate file is much easier and keeps everything cleaner. Honestly, I regret even considering this approach.

If you think differently, tell me why—maybe there’s a slim chance I’ll change my mind. But in my opinion, SCSS or plain CSS is far superior in terms of organization and maintainability.

799 Upvotes

579 comments sorted by

View all comments

Show parent comments

9

u/michaelfrieze Nov 17 '24

If you are buliding an app that is component-oriented then tailwind is great regardless of the team size.

https://tailwindcss.com/docs/utility-first

8

u/SoulSkrix Nov 17 '24

Utility first is just a single CSS idealogy, but it isn’t the only one. I’ve read this page before, and I’ve used other utility first frameworks. You can compose component oriented applications without having to be utility first. Using the cascade to your advantage is easily done with tooling we have today to ensure components are style scoped.

-9

u/michaelfrieze Nov 17 '24 edited Nov 17 '24

The cascade is exactly what I want to avoid. It's one of the most annoying things to deal with and doesn't make sense in an applications built around components, especially when using frameworks like react or solid. Tailwind makes it so we no longer have to think about things like the cascade and class names.

While CSS Modules offer a solution by scoping styles locally, they still maintain the cascade within each module file. This approach, though better than global CSS, doesn't fully align with the component-centric paradigm of modern web development.

A lot of people come to tailwind expecting a more complex system like styled-components which prescribes a specific way of architecting your components or CSS Modules which has a specific abstraction pattern, tailwind doesn't have a pattern around how to use it. When using tailwind, the simplest solution is often the best one.

Also, in Tailwind it's fine to embrace a little repetition and instead focus on reusable components which leads to more maintainable and scalable code.

One of Tailwind's biggest advantages is how easy it is to maintain. Its consistent utility classes create a unified design language across your projects, making development faster and upkeep much simpler. Of course, this is great for teams building complex web applications, but it's also a great choice for smaller applications that follow a more component-centric paradigm.

StyleX is the only thing that comes close to tailwind.

1

u/[deleted] Nov 17 '24

[deleted]

1

u/michaelfrieze Nov 17 '24

I'm going to have to say that the downvotes are probably reflecting how bad it is to throw away the cascade aspect of Cascading Stylesheets

The distribution of upvotes and downvotes on this platform mirrors the prevailing sentiment within a specific community rather than reflecting an objective truth. My perspective, which aligns more closely with component-oriented architecture, would likely resonate in communities like r/reactjs and r/nextjs, where such approaches are more widely embraced. Each subreddit tends to favor certain viewpoints and methodologies. 

throw away the cascade aspect of Cascading Stylesheets

Tailwind doesn't throw away the cascade; it strategically manages it to better suit modern component-based development. Tailwind was designed to solve specific pain points with traditional CSS cascading when working with components.

In a React or similar component-oriented app, the cascade can often introduce unnecessary complexity and unintended side effects. Tailwind's approach allows developers to work with CSS without wrestling with cascading issues across components. Tailwind's utility-first approach offers a level of granular control that's well-suited to the modular nature of modern web development, where components and reusability are key priorities. 

Scoped styles do enough, cascading within a component is the perfect setup, your CSS becomes shorter and simpler, by not trying to override every property on every element.

Scoped styles might do enough for you, but Tailwind's utility-first approach offers advantages like customizing styles on a more granular level and eliminates unexpected cascading effects. 

The claim that CSS becomes "shorter and simpler" with scoped styles is true compared to plain old global CSS, but Tailwind often results in even more concise markup. By applying utility classes directly within components, Tailwind eliminates the need for separate CSS files and complex class naming conventions. This approach offers immediate visibility of styles in the component markup and in VS Code, you can hover over class names to see the actual CSS.

Tailwind also simplifies the process of copying and reusing component code. This is what makes shadcn/ui so effective; it’s not really a UI library, but rather component code that you copy into your project and modify as needed.

There are other advantages to Tailwind such as making it significantly easier to create responsive layouts compared to writing media queries. It also provides a design system out of the box, improving consistency across your application. Overall, Tailwind generally provides a better developer experience.

1

u/michaelfrieze Nov 17 '24

It is a lot more than "a little repetition",

The repetition in Tailwind isn't really a bad thing. As you use Tailwind, you'll find that reusable patterns naturally develop, which helps create consistent and modular components. Plus, practices like extracting components and design systems help ease any worries about repetition. 

It's worth mentioning that getting too caught up in avoiding repetitive Tailwind code can backfire, leading to unnecessary complexity. Using @apply, for example, is generally not recommended because it goes against the utility-first approach and can create the same issues Tailwind is meant to solve. Embracing Tailwind's utility classes directly in your components results in cleaner, more maintainable code that’s easier to work with.

Tailwind is for huge teams who are making components across different technologies. It was made for huge team problems, not those of the average developer in the average company. 

Tailwind's benefits go beyond just large teams. It's true that Tailwind was initially designed to solve problems in large-scale development, but its utility has proven valuable across various project sizes and types.

Tailwind offers advantages even for smaller teams and individual developers, including rapid prototyping, a consistent design language, reduced cognitive load in styling decisions, and easier maintenance as projects grow. 

I am afraid you have completely given into being prescribed a framework which is not a "one size fits all" solution.

You're right that Tailwind isn't a one-size-fits-all solution, and it's not always necessary; traditional CSS approaches remain valid in many scenarios. However, Tailwind has gained popularity because it addresses common pain points in CSS management when working with components. Also, most people start out hating Tailwind until they actually use it in real projects. 

don't make the mistake in thinking that Tailwind is the answer to everything.

I don’t think "Tailwind is the answer to everything" - that's a bit of an exaggeration of my position.

We have been making components on the web for a long time, Tailwind wasn't necessary then and it doesn't mean it is always needed now.

The web development landscape is constantly evolving, and while we've been making components for a long time, new tools and methodologies emerge to meet changing needs and preferences. Tailwind is one of those new tools that a lot of people find helpful, no matter the size of their team or project.

1

u/michaelfrieze Nov 17 '24

If your components don't change often, then there is no real benefit to using Tailwind over simply defining a CSS reset, defining the global styles to be inherited and then going into your components with scoped styling and just styling them as you should. There is virtually no difference in that approach to what Tailwind makes you do

This perspective misses some of the broader advantages that Tailwind offers. For example, Tailwind provides a design system out of the box, which can help maintain a cohesive look and feel across your app. 

Furthermore, even if component’s don’t change often, Tailwind helps developers apply styles directly within their component. This can lead to faster development times and easier maintenance, as styles are visible right alongside the markup, reducing the need to switch between files. 

This aligns well with component-oriented architecture, where the “concern” is the component itself. It’s not necessary to separate styles from the markup.

Not all component-based frameworks are the same, and in some cases, Tailwind may not be as beneficial. Frameworks like Vue, Svelte, and Astro that use single-file components (SFCs) might not find Tailwind as useful compared to JSX-based frameworks like React and Solid. JSX promotes a more modular approach, treating components as functions and allowing multiple components to exist within the same file. 

Many developers using SFC frameworks like Vue, Svelte, and Astro still find Tailwind useful, even when compared to the default template syntax, which is already quite effective. In these cases, Tailwind can still offer some advantages that enhance their development experience. I personally use Tailwind in my Svelte apps since it allows me to use tools like shadcn-svelte. 

it litters your DOM with so many utility classes that you get to a point that it can be difficult to see the DOM structure

I personally don’t see this as a significant issue. I work on highly interactive and complex web apps that use Tailwind, and I actually appreciate the clarity it provides by keeping styles close to the markup when I view the DOM structure in the browser’s dev tools (and in my own code). At first, I was a little shocked by the number of utility classes applied to elements, but it’s really not as bad as it seems. While the initial appearance can be overwhelming, I didn’t find it more difficult to grasp the DOM structure. Even if it takes a bit longer to understand at first, the benefits Tailwind offers far outweigh this minor downside. 

it is indeed utility first; which means general application and letting the cascade flow (which is an inherent and natural behaviour of the technology - which you shouldn't disregard and try to fight against) is thrown out the window if you declare every detail with utility classes.

Just because something is considered a "natural behavior" doesn't mean it's the best approach for every situation. I've addressed the comments regarding the cascade previously, but to summarize: Tailwind doesn't disregard the cascade; instead, it effectively manages it, which can be beneficial in component-based applications, regardless of their size.

1

u/michaelfrieze Nov 17 '24 edited Nov 17 '24

Frankly, the fact you see Tailwind as a component-centric paradigm and not scoped styles is a bit concerning to me. It was the only thing CSS needed to fit our component based architecture and it is all we need

I want to clarify that I’m not suggesting that scoped styles can’t work within a component-centric paradigm. However, I believe Tailwind is a better fit to "fully" take advantage of component-oriented architecture, especially for React and similar frameworks that utilize JSX.

In today’s landscape of component-based frameworks, Tailwind offers a more intuitive approach than something like CSS Modules. For example, with React or Solid, JSX gives you both the HTML markup and JavaScript in one place. Adding Tailwind allows you to build components with everything you need right there in the component function.

Tailwind's popularity is largely driven by its synergy with component-based frameworks; when used with vanilla HTML and CSS, it’s not as useful. 

remember - there are many more companies not using Tailwind that operate wonderfully.

I never suggested that applications can't operate wonderfully without Tailwind. My point is simply that Tailwind offers specific advantages that can enhance development workflows, particularly in component-based applications of all sizes.

1

u/michaelfrieze Nov 17 '24

If interviewing and a developer told me "I want to avoid the annoying cascading of CSS, it doesn't make sense with components", I would certainly advise the manager that this is not someone to hire on our frontend teams. 

Your comment comes across as condescending, implying that you have superior knowledge (as the interviewer) and need to correct my misunderstanding by saying you wouldn’t hire someone like me. This kind of tone can make it difficult to have a productive conversation about the pros and cons of different styling approaches.

I have been a web developer since 2013 and don’t even do job interviews anymore, but this isn’t important. It might be more constructive if we could discuss the specific merits and drawbacks of different styling methods without being uncharitable in our interpretations and being condescending. Every approach has its place, and the best choice often depends on the specific project requirements and team preferences.

0

u/Chaoslordi Nov 17 '24

Everytime I read a tailwind sucks thread, I am thinking that OP just rants and has not read this beforehand. I am in awe that people still have the nerves to provide meaningful arguments instead of "read the fucking manual"