Sources

Scroll through tech Twitter or GitHub, and you’ll see developers praising its utility-first approach. But as someone who’s spent years crafting maintainable CSS systems, I see a concerning pattern: we’re returning to practices we fought hard to move away from. … **The difference is striking.** The traditional approach tells you exactly what this element is - a primary button. The Tailwind version? It fundamentally uses inline styles disguised as classes. We’ve replaced `style="background-color: blue"` with `bg-blue-700`, but the fundamental problem remains: we’re mixing content with presentation. … ## The real cost of utility-first CSS The problems with Tailwind become apparent when your project grows. Want to change how all your primary buttons look? With traditional CSS, it’s one change in your stylesheet. With Tailwind, you’re hunting through your entire codebase, replacing dozens of utility combinations. And what happens when design requirements change? Imagine updating the padding on all your cards from `p-4` to `p-6`. With traditional CSS, it’s a single line change. With Tailwind, it’s a search-and-replace operation that could easily miss edge cases or break other components. … ## The maintenance nightmare Advocates of Tailwind often argue that it eliminates the need to think about naming conventions. But names serve a purpose - they convey meaning. When I see `.card`, I know what it represents. When I see `p-4 rounded-lg shadow-md`, I have to mentally parse multiple style definitions just to understand what I’m looking at. **This cognitive overhead becomes a real problem in larger teams and projects.** New developers need to learn not just what components exist, but memorize combinations of utility classes that create those components.

I understand the criticisms of Tailwind, but I see it as a nice midway point between bland/difficult to maintain Bootstrap-y component classes and unintuitive, clunky vanilla CSS. ... Then again I haven’t had to professionally maintain CSS in a while, and from what I observe my FE colleagues doing I’m guessing it’s probably a bit in the way. ... Tailwind, as a library, solves three problems: Unfortunately, the utility class approach is fundamentally degenerate: it can never fully express CSS, and CSS is the thing which browser vendors actually support. So you are always playing catch-up. The series of increasingly ridiculous hacks they have come up with to fit CSS into a class-shaped hole is something to behold. First they needed a compiler to strip the unused classes. Then they started dynamically generating styles … `class` attribute without *completely* obliterating the markup (and yet the results are not great). Actually all that is needed is to write normal CSS and then scope it. The components come out looking like this. I’m biased but I think it looks just fine! But more importantly, the class names cannot collide because the selectors are mangled automatically (as opposed to by hand) by the compiler. … `Tailwind` may seem nice at start, but the more complex your template is the worse it looks like. What’s success? It was forced and many posts were created to ask how to get rid of it completely, how to install some CSS framework and so on … The way it was forced is terrible to maintain and customise if you don’t want to use … Yes, you would. Tailwind is essentially a mediocre DSL of CSS. The classes mostly map very closely to CSS, and you will not understand them unless you also understand CSS. This also goes both ways. I have seen people criticize Tailwind by saying it’s “another thing to learn”, which is patently absurd. If you know CSS the meaning of nearly all of the classes is

Clearly, the HTML is bloated with lots of utility classes, which are necessary with Tailwind to achieve the desired styles. The initial reaction when looking at some Tailwind code as above is that it is ugly. Although this impression is subjective, it is closely connected to the (more objective) lack of maintainability and readability of the code, which we will expose next. Homer Gaines has put out a tweet that demonstrates side-by-side how Tailwind code is less readable when compared to HTML with regular CSS. Many people initially shared this feeling that Tailwind code is ugly, but got used to it after some time. This did not happen to me, though. ### Changing styles The Tailwind classes for one element are gathered inside a long horizontal string, a "class soup". This happens even though the snippet above uses Prettier with a maximal print width of 80 characters. Prettier cannot linebreak long string literals. This makes it hard to find which property or utility class you need to adjust. Often you need to scroll. … ``` .size-label { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: rgb(51, 65, 85); .size-input:checked + .size-label { color: white; font-weigt: 600; background-color: rgb(15, 23, 42); ``` You will find the CSS property faster, right? This is because you only need to scan the keys, which are aligned under each other and hence easy to see. Alternatively, you can look for the values and quickly identify the colors. ... In a Tailwind class string, you cannot skip anything. You are also faster at looking for the background color in the CSS code since the whole string … Readability is also negatively impacted by the lack of syntax highlighting: Tailwind class names are just displayed as strings. Also, they tend to be short but not descriptive enough (more on that later). CSS code is much more expressive and therefore easier to understand. … A potential solution for this problem is to use VS Code extensions such as Inline Fold or Tailwind Fold which collapse or expand all the utility classes. However, this introduces an extra step to edit the CSS or HTML, which goes against Tailwind's marketing promise that you can edit the CSS easily in your HTML. In reality, Tailwind introduces maintainability issues that need to be fixed, for example, with VS Code extensions. This will be a common theme in the following sections. The general problem is that even when you do not want to adjust the styling of your markup and instead want to adjust the content or add new stuff, Tailwind's utility classes are always in your way. As a consequence, reading and maintaining HTML littered with Tailwind classes will take longer. … There is no justification for the claim that HTML is easier to maintain than CSS, which I highly doubt when it is littered with utility classes and no descriptive class names (see also the section on class names). With Tailwind you create hard-to-maintain HTML instead of hard-to-maintain CSS. Then they go ahead and tell us how many companies already use Tailwind. This is just poor marketing inside of a documentation page, where it does not belong. ... > Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. Again, there is no justification for this bold claim. This is only the beginning. ... ## Code duplication Since Tailwind's philosophy is against using reusable classes, but your page will usually contain several elements that should behave and look similar (links, buttons, headings, inputs, ...), you are likely to repeat the same Tailwind utility classes over and over again. This leads to code duplication, which is a code smell. The code becomes wet. … This is still ugly and suffers from bad maintainability as already explained before, but at least we removed the code duplication. But this solution means that you are dependent on a component framework such as Svelte, React, Astro, etc. to avoid code duplication with Tailwind (web components don't play well with Tailwind). Even though such frameworks are common for most web applications, it is not something you would normally consider when you are about to quickly spin up a simple landing page with HTML and CSS, for example.

#### Readability One of the main complaints and what keeps other developers not wanting to touch Tailwind is its readability. With multiple utility classes **(`p-6 max-w-sm` `mx-auto` `bg-white` `rounded-xl` `shadow-md` `space-y-4` etc.). ** applied directly to elements, your markup can become messy and harder to understand. This is true especially with untrained eyes. I too had this kind of complaint at the beginning of my journey but this is hardly the case with enough time and practice. #### Learning Curve While Tailwind is powerful, it does come with a learning curve. After all, you’ll have to learn a new set of utility classes and change your old habits while using traditional CSS or even CSS-in-JS. For example, classes like **`space-x-4`, `flex-shrink-0`, and` hover:bg-blue-600`** are specific to Tailwind and require learning Tailwind's conventions and naming scheme. Albeit powerful, Tailwind’s configuration file can be complex for beginners. Understanding how to customize the default theme, extend utilities, and purge unused CSS efficiently requires a deeper understanding of Tailwind's configuration options. This additional layer of complexity can be a hurdle for those new to the framework. #### Lack Semantic Classes Tailwind utility classes are functional but not semantic. Making it harder to understand the purpose of an element at a glance. This can be a problem for those developers who like to have meaningful HTML class names. The utility classes used here (`p-6, max-w-sm`,` rounded-xl`, etc.) do not convey the purpose of the elements. Unlike semantic classes (like `.card`, `.card-header`, `.card-body`), these utility classes are purely functional. This can make the code harder to understand for others who prefer meaningful class names that describe the role of each element. Despite the challenges mentioned above, once a developer becomes proficient with Tailwind CSS, the benefits of rapid, consistent styling and the power of utility-first CSS can significantly enhance productivity and maintainability in large projects. However, these initial hurdles can be daunting for beginners or those accustomed to traditional CSS practices. … #### Cons Compared to Tailwind **Development Speed:** Slower due to the need for separate stylesheets and frequent context switching. **Consistency: ** Harder to maintain a consistent design system without a framework. … #### Cons Compared to Tailwind **Complexity:** Can add complexity to the codebase, especially in large applications. **Performance:** Potential for larger bundle sizes and runtime performance overhead due to inline styles.

## Configuration Complexity: Diving Deep into Tailwind's Abyss Tailwind CSS prides itself on being highly customizable, offering a vast playground to tailor your styling to the exact needs of your project. However, this very flexibility can quickly become a double-edged sword. Venturing into the depths of `tailwind.config.js` can sometimes feel less like fine-tuning and more like navigating a labyrinth. … Furthermore, the plugin ecosystem, while enriching, adds another layer of complexity. Plugins can extend Tailwind's functionality in countless ways, from adding typography styles to handling form appearance. Integrating and configuring these plugins requires careful consideration and can further complicate your `tailwind.config.js` file. What starts as a simple configuration file can quickly grow into a substantial block of code, potentially becoming difficult to manage and understand, especially for larger teams or projects with intricate design systems. Debugging configuration issues can also be less intuitive than debugging CSS itself. … **Configuration Conundrums:**Tailwind's configuration file is powerful, allowing for deep customization of your design system. However, as projects grow, managing this configuration can become complex. Changes to themes, breakpoints, or custom styles require navigating potentially large configuration files, and ensuring consistency across the project becomes a configuration management task in itself. … For instance, a text color might seem to be overridden unexpectedly. You need to examine: **Parent element styles:**Are there any Tailwind classes on parent elements that are affecting the element in question through inheritance or CSS cascade? **Specificity conflicts:**Although Tailwind CSS aims to minimize specificity issues, custom CSS or poorly structured HTML can still lead to unexpected overrides. **Conditional classes:**Classes applied conditionally based on breakpoints (e.g., … **The Sheer Volume of Classes:**Tailwind CSS offers an extensive library of utility classes. While this breadth provides immense flexibility, it also means there's a lot to learn. Remembering the naming conventions and the specific classes for various styling needs can be a significant cognitive load, especially for newcomers. **Steep Initial Learning Phase:**Before you can truly leverage the speed and efficiency of Tailwind CSS, you need to invest time in understanding its class system. This initial learning phase can feel slower compared to starting with traditional CSS, where you might already have a foundational understanding. **Context Switching:**Constantly referring to the Tailwind CSS documentation to look up classes can interrupt your workflow. While tools like IntelliSense and autocompletion help, the initial reliance on documentation is higher than with traditional CSS, leading to frequent context switching. **Abstracting Away from CSS Fundamentals:**While Tailwind CSS simplifies styling, it can also abstract you away from fundamental CSS concepts. Developers heavily reliant on utility classes might inadvertently miss opportunities to deepen their understanding of core CSS principles, potentially hindering their ability to troubleshoot complex styling issues or work effectively in environments without Tailwind CSS. … One of the primary hurdles is the varied levels of Tailwind CSS expertise within a team. Seasoned developers might wield Tailwind classes with finesse, crafting elegant and efficient HTML. However, newer team members or those less familiar with Tailwind's extensive utility set might struggle to write consistent and maintainable code. This can lead to a divergence in styling approaches, making it harder to ensure a cohesive look and feel across different parts of a project or across multiple projects. Consider a scenario where different developers interpret design specifications in slightly different ways. With Tailwind CSS, it's easy for one developer to use `text-lg font-semibold text-blue-500` for a heading, while another might opt for `text-xl font-bold text-indigo-600` for a similar element. While both might achieve a visually acceptable heading, the lack of consistency can accumulate over time, leading to visual discrepancies and maintainability headaches. Furthermore, without a strong style guide and clear conventions, teams can inadvertently create their own mini-frameworks within Tailwind CSS. Developers might start defining slightly different shades of colors or spacing scales using Tailwind's configuration, leading to fragmentation of the design system. This undermines the very purpose of using a utility-first framework to achieve design consistency. … ## People Also Ask For ### What are the downsides of using Tailwind CSS? While Tailwind CSS offers rapid styling and consistency, some downsides include increased HTML verbosity due to numerous utility classes, a steep learning curve to master the extensive class system, potential performance issues from large CSS files if not properly configured, and challenges in debugging styles due to abstraction. [1] … ### Does Tailwind CSS make HTML messy? Tailwind CSS can lead to verbose HTML as you add numerous utility classes directly in your markup. This can make HTML files appear cluttered and less readable, especially for complex components. [1] ### Is Tailwind CSS good for large teams? Tailwind CSS can be beneficial for large teams by enforcing a consistent design language and reducing the need for custom CSS. However, it requires the entire team to be proficient with Tailwind's utility classes to maintain consistency and avoid misuse. [2]

**Third**, Tailwind encourages you to configure a limited number of design tokens. “Design tokens” is a scary way of saying: when you tell Tailwind you prefer your text size to be either 1rem, 1.2rem, 1.5rem, or 2rem, then your team can *only* use those text sizes; no 1.4rem or 16px nonsense, here. When you tell Tailwind your brand colors, your team can *only* use those colors. … Also, why do I have to learn all-new syntax for CSS I already know? Why do I have to know that it’s items-center when I already know align-items: center? And my *team* has to learn it too? Now there’s a learning curve that everyone has to climb. And it’s steeper than other tools which just express their styles in basic CSS. Not to mention, there’s the sometimes-dramatic cost of migrating from one syntax to another. That’s a big^2^ deal. And finally, what a bummer it is to add another build tool. There’s no way to just toss up an directory with some files or a client-side codesandbox without building that CSS first. And how do I add Tailwind to my SvelteKit build pipeline, again? I’ve been working professionally with Tailwind for years now. And I’m *still* not over these things. And, like with any opinionated tool, everyone’s going to have a list just like this.

A practical look at whether Tailwind CSS is right for your next React project, including tradeoffs, team fit, and maintainability.

### Reason 1: Tailwind promotes ugly-ass HTML. # This first reason is an aesthetic concern, yet it’s intimately related to real technical challenges which I’ll outline shortly. But at the very least, I **hate** the way utility-css-only HTML looks. Hate, hate, hate it. Adam even acknowledges this head on when he begs us to “suppress the urge to retch long enough to give it a chance…”. This is a tacit admission that writing markup this way initially seems ugly and weird—but somehow we’ll eventually just “get over it” because the benefits are so great. … ### Reason 2: `@apply` is fundamentally incompatible and non-standard (and largely unnecessary). # This is where a lot of Tailwind fans get tripped up and keep on arguing with me over and over again, so I’ll try to explain this as clearly and obviously as possible. `@apply mt-3`in a CSS file *only*works if you use Tailwind. It requires the presence of Tailwind in your build process. If you remove Tailwind from your build process, that statement doesn’t work and your CSS is broken. - While it’s true you can take the generated output CSS of a site and use that without Tailwind, it’s typically a bundled compilation of dozens if not hundreds of small CSS files scattered around a codebase (if you write CSS-per-component files like we do). It’s not something you can count on for source code. - Therefore, it’s simply the truth that CSS files built for Tailwind are non-standard (aka proprietary) and **fundamentally incompatible**with all other CSS frameworks and tooling. Once you go Tailwind, *you can never leave*. (da da dum 😱) - And as an added bonus, writing all your CSS files with … And while `@apply` seems cool on the face of it, it ends up becoming an enormous crutch. For example, I like the way Tailwind makes writing styles using CSS Grid techniques pretty straightforward. Unfortunately, after having done so, I still don’t really understand Grid syntax itself. I remain ignorant of the open CSS standard. As for why `@apply` in the grand scheme of things is largely unnecessary, that brings me to my third point. ### Reason 3: Tailwind’s focus on design systems and tokens could mostly be replaced by CSS Custom Properties (aka variables)—which IS a standard. # People initially like Tailwind because it comes out-of-the-box with a nice design system and lots of tokens you can tweak (colors, font sizes, spacing, etc.). It’s easy to get good-looking results quickly. … *native* to all modern browsers. Speaking of what’s native in modern web browsers… ### Reason 4: Tailwind forgets that web components exist. # This is perhaps the biggest knock against Tailwind. It seemingly was conceived and promoted in a world where web components don’t exist. Tailwind CSS is completely unusable within the Shadow DOM. Some enterprising developers have come up with solutions where select bits of Tailwind styling can get injected into components through a build process, but it’s definitely a hack. … ### Reason 5: Finally, Tailwind encourages div/span-tag soup. # I almost included this in the previous point, but it really bears its own conversation. I have become convinced by now that using `<div>` and `<span>` tags everywhere in your markup is an anti-pattern. We live in a world where custom elements (aka … **looks amazing** and works quite well—all without needing *any* of the many megabytes of Tailwind utility classes that you then need to purge to get your performance back down to manageable levels. In other words, Tailwind’s main selling point (besides rapid prototyping via utility classes) is its attractive design system—yet the way it implements that design system really kind of sucks! (Incompatible with web components by default, only minimally leverages CSS variables, doesn’t encourage custom elements/attributes with relevant scoped styling…)

People hate Tailwind CSS. I get it. - "Your HTML looks ugly." - "It's just inline styles with extra steps." - "CSS-in-JS is better." - "You're not learning real CSS." I've heard them all. I used to think the same thing. When I first saw this: tsx … Runtime performance was awful. My JavaScript bundles were massive. Server-side rendering was a nightmare. Hot reloading was slow. The tooling was fragile. I spent more time fighting the CSS-in-JS runtime than actually styling components. CSS frameworks have tried every abstraction level. Component frameworks like Bootstrap give you pre-built components. CSS-in-JS gives you component-scoped styles. CSS modules give you file-scoped styles. Tailwind gives you design tokens as classes. I found that component-level abstractions break down. Every project needs custom components. Pre-built components look generic. You end up overriding half the styles anyway. Even with modern solutions like shadcn/ui, which takes a smarter approach by giving you the actual component code instead of a black-box library, you still need a solid styling foundation underneath. … Tailwind generates only the CSS you use. My final stylesheets are tiny. Most projects ship less than 10KB of CSS. Compare that to component frameworks. Bootstrap's full CSS is 200KB+. Even if you tree-shake, you're shipping styles you don't need. The JIT compiler makes development fast. Changes compile in milliseconds. The build step is barely noticeable. I've shipped production apps with 4KB of CSS. Try doing that with any other framework. … Tailwind isn't perfect. The HTML can get verbose. Complex layouts require many classes. The learning curve exists. Some designs don't fit the utility model well. Highly custom animations or complex graphics might need regular CSS *(Or Framer Motion!!!)*. The file size can grow if you're not careful. Unused purging helps, but you need to configure it properly.

{ts:104} Blasphemous inline Styles at first glance and that's a very valid criticism {ts:108} and likely the main turn off for people {ts:110} when they first look into using Tailwind however the benefit is that you don't {ts:113} have all these arbitrary class names … {ts:126} tailwind and hate the way your HTML looks the inline fold vs code extension {ts:129} can automatically minimize it for you {ts:131} problem number two is that CSS is for Bose remember everything in Tailwind is {ts:135} just CSS hover over any class to view … {ts:160} you have to learn an abstraction on top of CSS which is not ideal it's always {ts:164} best to use the platform natively but {ts:166} the web platform is often cruel and vengeful Now problem three is that CSS {ts:170} gives you too much control over the UI … {ts:182} design like when you build a bootstrap app it always tends to look like a {ts:185} bootstrap app with Tailwind is not so {ts:187} obvious now the final problem I want to talk about is zombie Styles we have a {ts:191} tendency to write styles that never

Cons: - Mixes the ol’ separation of concerns — styles with markup. - It bloats HTML markup and looks like inline styles === ugly. Tip: if what bothers you in Tailwind is the “ugliness” inside your HTML, you can use the Inline Fold VScode extension. ### Verbosity CSS is very verbose, meaning you need to write a lot of characters to define each property. Also, there are things that might need a few properties to achieve something relatively simple. When you write pure CSS, you write a lot of code. Pros: - Everything in Tailwind is just CSS. ... - Writing with Tailwind results in less code. ... - One Tailwind site/app can look completely different than another. - Easy to refactor. Cons: - You need to wire up custom CSS that might not be mapped to a TW utility class. - Tailwind is a non-standard way to use CSS. ### Zombie styles Unused CSS can bloat up your website or app. There’s nothing to stop you from writing the same style properties in different classes or selectors. Styles that aren’t used are still shipped to the browser but have no effect, they just hang around your codebase like zombies 🧟‍♂️. Pros: - Tailwind purges any styles (and zombies) that aren’t used. … “One issue for me with Tailwind-like solutions is that they 'confuse' Utility-Classes with Design Tokens, and unnecessarily bind them together. Design Tokens are great, we should absolutely use them, and it's very(!) easy to do with CSS custom properties. Utility Classes are also great, and we should use them too - for utility purposes. Mapping tokens to classes goes against every basic CSS principle and is quite redundant once you're working with a good set of tokens and a few basic useful utility classes.”

### Prompt Vagueness **Problem: **AI outputs unpredictable code if prompts are unclear. **Solution: **Define clear prompts like, “Create a 3-column feature grid using Tailwind with hover effects and mobile responsiveness.” ### Class Overload **Problem: **AI-generated code can sometimes stack too many utility classes. **Solution: **Use Prettier with Tailwind plugins and consider extracting common patterns into reusable components. … ### Problem 2: Time Constraints Let’s say a client wants a new product page before a launch next week. You don’t start from scratch. You prompt your AI tool: “Create a responsive product detail page using Tailwind CSS with ratings, reviews, and add-to-cart.” It builds 80% of it. You polish the rest. Done in hours, not days.