Disadvantages of Tailwind

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.