|
Listen to this story
|
Developers are the quickest to jump on any hype train that promises even the smallest improvements and ‘Tailwind’ is the latest target of this trend. This CSS framework has become quite divisive in the front-end programming community, with many thinking that it’s the best thing since sliced bread.
Of course, its critics have dismissed it as just another flashy new framework. As with anything, the truth is somewhere in the middle. However, one thing is for certain—once devs start using Tailwind, there’s no turning back.
What makes it special?
Tailwind has been in development since November 2017 but it really exploded onto the scene at the beginning of 2022. The creator of the framework, Adam Wathan, has spoken at length about his dislike for semantic CSS. This led him to building Tailwind, which throws semantic CSS out of the window in favour of a utility-focused CSS approach.
Semantic CSS refers to the process of naming various HTML elements with names that have a meaning. For example, instead of naming a checkout button something like ‘bottom red box’, it can be named ‘checkout’. However, when following this approach, devs are generally asked to semantically name the content in HTML while using these class names as hooks in CSS.
This approach is generally used to allow devs to swap out stylesheets if they want to change the visual style of the website without breaking compatibility. Wathan’s approach, as detailed in his blog, was to optimise for reusable CSS mixed with HTML, a general deviation from the separation of concerns that semantic CSS follows. This is one of the main talking points when it comes to Tailwind.
Tailwind mainly applies CSS by creating small and simple classes that can be directly applied to HTML elements, reducing the amount of CSS code that needs to be written.
However, just as these features make things easier for a subset of developers, they’re a no-go for another group. The small class-focused approach of Tailwind generally results in a difficult-to-read HTML file and long lines of code. The ‘restrictive’ nature of Tailwind is also brought up as a common drawback because it only allows for a small subset of CSS styles to be used. With so many issues, developers are beginning to question: Is Tailwind overhyped?
Beyond the hype
Apart from the legion of tech bros claiming milliseconds of faster load times while using Tailwind, there are multiple other reasons for using it. Even though the learning curve might be unpalatable for veterans of semantic coding styles, the benefits are numerous. Even the creator of Tailwind couldn’t stomach changing his coding style until he did, stating,
“The truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.”
Indeed, the Tailwind website is filled with positive reviews of the benefits coders gained from working with the framework. Many devs echo the fact that semantic CSS was a mistake, with another common point being that devs can’t go back to ‘normal’ CSS after working with Tailwind.
The framework also comes with a host of nice-to-haves, such as strong defaults that can be customised as per the users’ preferences, support for responsive websites and automatic cleanup of unused CSS classes. These features resemble automated ‘best practices’, which will definitely smoothen team projects. After relying on these features, it becomes difficult for devs to do them manually after switching away from Tailwind.
The restricted nature of Tailwind is also a godsend for newer developers, who only need to refer to a single source of documentation rather than trawling through the web to find documentation for CSS styles. Tailwind also favours convention over configuration. While this may be blasphemous for developers who prefer the infinite configurability of CSS, it works wonders for both newer developers and larger teams who don’t want to deal with the problems associated with semantic CSS.
Tailwind is also built from the ground up to reject semantic CSS completely, which means that developers must break their hard-coded habits and not use semantic CSS. Using semantics can cause many problems in Tailwind. As stated by user ‘frontendben’ on the Tailwind subreddit,
“The point of utility CSS is that you should be able to tell what the class is doing with zero context/needing to open the CSS file. CSS is a declarative language. Yes, it can be used to define styles in an imperative way, but that’s often where the biggest headaches in maintaining CSS comes from.”
The battle of Tailwind against semantic CSS, or even the Block Element Modifier or BEM, approach is sure to be a long and arduous one. Semantics are one of the hardest problems to solve in programming but Tailwind might have found the solution by merely skipping over the problem.
