Tailwindcss? I'll Pass

Recently, I used Tailwindcss in a project and you know what? It was an eye-opening experience, to say the least.

Some of you might be wondering: what is Tailwindcss?

Tailwind CSS stands out as the fastest-growing CSS library to date. It has swiftly become an essential tool for front-end developers. Many developers on the front end are utilizing it in large-scale projects, encountering minimal issues. Its enhancements to website and web-app development and design are undeniably remarkable.

So, what’s the problem? Why does the title say '“Tailwindcss? No Thanks”?

This title suggests that there could be instances when Tailwind CSS might not be the optimal choice for your projects, despite its excellence. Why could this be? There is an answer. Yet, before we delve into the explanation, let's establish the groundwork for this examination of the technology.

What’s with all the CSSs?

Before we can get into Tailwindcss and its development intricacies we must satisfy a few prerequisites.

What is CSS?

CSS stands for Cascading Style Sheets. The best definition for CSS in my opinion comes from techterms.com

“CSS is a style sheet language used for formatting content in HTML webpages. CSS style sheets can define the appearance and formatting of text, tables, and other elements separately from the content itself. Styles may be found within a web page’s HTML file or in a separate document referenced by multiple webpages”.

In not so many words: CSS is s styling language. You use CSS on HTML elements to make your webpage or web app look excellent.

What is Tailwindcss?

From the words of the Tailwindcss team themselves, Tailwindcss is “A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup”.

This essentially means tailwind CSS takes original CSS procedures and operations and then makes them simpler to do and implement.

We've already discussed the basics of CSS and Tailwind CSS. Now, let's delve deeper and examine how Tailwind CSS operates in practice, along with its corresponding CSS counterparts. This exploration will eventually lead us to the conclusion I reached during my project involving Tailwind CSS.

My conclusion is that Tailwind CSS is best suited for larger and more complex front-end projects. However, the default choice for most situations should still be "vanilla" CSS. In other words, using CSS in its purest form is generally more advantageous for most individuals and scenarios compared to any additional library, be it Tailwind CSS or others.

Differences between CSS and Tailwindcss

What does Tailwindcss look like? Let’s compare by making a vanilla CSS equivalent and then a Tailwindcss equivalent.

Let’s break down what’s going on in the above text. It is an HTML 5 excerpt and we are constructing a button.

To construct the button we set it up through “divs” - essentially small containers to input things for changing our website or web app. We give each div its own “class” so we are able to reference that particular element later on in our separate CSS file. Although, you can also give divs their own “ids”. You can do “in-line” CSS changes, which means you can put CSS directly into the HTML file but most tend to avoid that for the sake of organization.

In the CSS file, what could our code to edit the button look like?

In the above code, we are interacting with the button class in the HTML excerpt. The way you make your CSS file aware of your HTML classes is with a dot at the beginning of the class name itself. Below that, in order, we align the button to the center of the div with “align-items”. Below align-item is the “background clip” which defines how far the “background-color” will stretch to and not stretch over. The “border” is the thickness of the sides of the button and the border radius is how curved the edges are. All we’ve just mentioned contributes to developing the button style. As we can see, the original CSS styles seem simple enough. How would Tailwindcss handle the same case?

Wait, what? Did we just put CSS-looking code into an HTML file? yes, we did. What you are looking at is the equivalent of the previous code examples in Tailwindcss. This is actually one of the more unique attributes of Tailwindcss. When using Tailwindcss you do not put your separate CSS code into a different file. All your Tailwindcss code goes directly into your HTML file. As we stated before, developers traditionally avoid in-line CSS coding. With Tailwindcss in-line coding is no longer really an option, it is almost necessary. The Tailwindcss is fully implemented through class identification.

Now, what does the code above do? it does exactly what the original CSS code does, albeit slightly differently.

Let’s take another look at regular CSS vs the Tailwindcss counterpart.

In the above image, we are in an HTML5 document importing a picture of chocolate under the class “card-img”. Let us see what the corresponding CSS looks like.

The above CSS code is similar to the last one. No need for much in-depth extrapolation. We are defining the chocolate cards’ appearance. Let us now see the much more interesting Tailwindcss variant.

The code above is the Tailwindcss equivalent. It is much simpler, and more elegant but requires much more effort to know what everything means and how to position statements. So is that an advantage it has over traditional CSS?

The nature of Tailwindcss makes it very messy. All your code, both HTML and CSS, will be in one file and will be long and seemingly crowded. This makes it difficult to develop.

What are the main disadvantages of Tailwindcss?

• Steep learning curve that takes time to get used to.
• Have to make custom class components. (This could add up to a lot on a long project).
• Confusing because HTML and styling are mixed

What are its main advantages?

• Highly customizable

• Faster development

• Consistent wording and patterns regardless of what’s being added or edited.

  
  

We have seen examples of Tailwindcss and now we know the main advantages and disadvantages. But, how popular is it?

It has been adopted and proliferated amongst both old and new developers.

Vivian Guillen of tailwindweekly.com stated that Tailwindcss had gained 4.5 million weekly downloads as of November 19, 2022. As I am writing this, if you go onto npmjs.com and search for Tailwindcss it has 336 million downloads. Since its release 5 years ago that’s an average of 184,110 downloads per day. An incredulous amount of downloads.

Winding down on Tailwind

Earlier, at the beginning of this piece, I wrote, “There may be a time or times when Tailwindcss is not the optimal solution for your projects”. Why did I write this? and how does it correlate with the title? “Tailwindcss? I’ll Pass ”.

Tailwindcss is popular globally amongst almost all frontend developers, it looks easier to implement than traditional CSS and it offers more customisability than other technologies of its type. Heck, my use of it even inspired this article itself. So why do I still doubt it? Because I used it of course.

Tailwindcss is every bit as good as everyone claims it to be and more. Similarly, it is every bit of bad as people claim it to be as well. The nature of Tailwindcss makes it convoluted to work with on short to midterm projects, the learning curve completely hampers your development, the insistence on making custom components, etc. These all make Tailwindcss unbearable, IN THE SHORT TERM. Only in the short term!

This means that Tailwind CSS should be reserved for extensive, intricate projects undertaken by developers and companies. For shorter projects, it's advisable to adhere to conventional CSS. This prevents your CSS skills from weakening and avoids becoming overly reliant on shortcut frameworks like Tailwind CSS. Why should you believe me? I challenged myself to employ Tailwind CSS on a minor project, and it genuinely underscored why it's better suited for substantial, enduring ventures. I'm excited to delve into other CSS frameworks and might even compose articles about them!

You can find out if you subscribe to me and we’ll be seeing each other very soon ;)