Developers are the quickest to jump on the hype that promises minimal improvements. “Tailwind” is the latest target of this trend. This CSS framework is highly controversial in the front-end programming community and is considered by many to be the best thing since sliced bread.
Of course, its critics dismiss it as one of the flashy new frameworks. As with anything, the truth lies somewhere in between. But one thing is certain—Once developers start using Tailwind, no turning back.
What’s special?
Tailwind has been in development since November 2017, but it hit the scene in earnest in early 2022. Adam Wathan, the creator of the framework, details his dislike of semantic CSS. This led him to throw semantic CSS out the window and focus on utility to build his Tailwind that takes a CSS approach.
Semantic CSS refers to the process of giving meaningful names to various HTML elements. For example, instead of naming your checkout button something like “Red Box Below”, you could name it “Checkout”. However, when following this approach, developers are typically asked to name content semantically in HTML while using these class names as hooks in CSS.
This approach is commonly used to allow developers to exchange stylesheets when they want to change the visual styling of a website without breaking compatibility. As detailed in his blog, Wathan’s approach was to mix and optimize reusable CSS with HTML. This is a common departure from the separation of concerns that semantic CSS follows. This is his one of the main topics about Tailwind.
Download mobile app
Tailwind primarily applies CSS by creating small, simple classes that can be applied directly to HTML elements, reducing the amount of CSS code you need to write.
But just as these features make life easier for some developers, they don’t help another group. In general, Tailwind’s small, class-centric approach results in hard-to-read HTML files and long lines of code. Also, the “restrictive” nature of Tailwind is brought up as a general drawback, as it only allows a small subset of CSS styles. With so many issues, developers are starting to question. Is Tailwind overrated?
Beyond the hype
Besides many tech bros claiming that using Tailwind reduces load times by milliseconds, there are a number of other reasons to use Tailwind. The learning curve may be unacceptable for veterans of semantic coding styles, but the benefits are numerous. Even the creator of Tailwind can’t stand changing his coding style, stating:
“The truth is, you’ll never believe me until you actually try it. If you can resist the urge to vomit long enough to give it a chance, how else would you do CSS?” I’m sure you’ll wonder why I was dealing with it.”
In fact, Tailwind’s website has a lot of positive reviews about the benefits coders have gotten from using the framework. Many developers have acknowledged the fact that semantic CSS was a mistake. Another commonality is that the developer cannot go back to “normal” CSS after using his Tailwind.
The framework comes with many useful features such as powerful defaults that can be customized according to user preferences, support for responsive websites, automatic cleanup of unused CSS classes, and more. These features are like automated “best practices” to ensure your team projects run smoothly. After relying on these features, it becomes difficult for developers to do manually after switching from Tailwind.
Tailwind’s limited nature is also a godsend for new developers who only need to refer to a single source of documentation rather than trawling the web to find CSS style documentation. Tailwind prefers convention over configurationThis may be blasphemy for developers who like the infinite composability of CSS, but it’s surprising for both new developers and large teams who don’t want to deal with issues related to semantic CSS. is.
Tailwind is also built from the ground up to completely reject semantic CSS. This means developers should break hard-coded habits and avoid using semantic CSS. Using semantics can cause many problems with Tailwind. As noted by user “frontendben” on the Tailwind subreddit,
“The point of utility CSS is to be able to know what a class is doing without having to open the CSS file, without context. CSS is a declarative language. Yes , can be used to define styles in a mandatory way, but that’s often where the biggest headaches of maintaining CSS come from.”
Tailwind’s battle against semantic CSS and block element modifiers (BEM) approaches is sure to be a long and difficult one. Semantics is one of the hardest problems to solve in programming, but Tailwind may have found the solution by simply skipping over the problem.
