Tailwind CSS is not Good Enough
Tailwind CSS is a popular CSS framework, claims to be highly productive and many good engineers that I know love it.
From the time I encountered it, i had a strange feeling that this is not a right approach. I wasn’t sure what it was, but I had that strong feeling. Now, I’ve figured out what is missing.
Struture and Interpretation of Computer Programs, popular known as the the wizard book, starts with the following insight:
A powerful programming language is more than just a means for instructing a computer to perform tasks. The language also serves as a framework within which we organize our ideas about processes. Thus, when we describe a language, we should pay particular attention to the means that the language provides for combining simple ideas to form more complex ideas. Every powerful language has three mechanisms for accomplishing this:
- primitive expressions, which represent the simplest entities the language is concerned with,
- means of combination, by which compound elements are built from simpler ones, and
- means of abstraction, by which compound elements can be named and manipulated as units.
This is a profound insight.
While it is said in the context of programming languages, it applies equally well for general programming tools and libraries.
Let’s see Tailwind CSS with this lense.
Primitive Expressions
Tailwind CSS has many css classes as primitive expressions. For example: w-72, bg-white, rounded etc.
The primitive expressions or the css classes seems to pretty useful and easy to use.
Means of Combination
The primitive expressions of Tailwind CSS can be combined together because css classes can be combined easily.
For example:
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
...
</div>
Each one of the class can be considered a primitive expression and many of them are combined to create the required style for the div in the example.
Means of Abstraction
This is where Tailwind CSS seems to be falling short. There is no way to give a name to a compute expression. In other words. it is not possible to define a new css class using the existing ones.
For example, consider the following example from the home page of Tailwind CSS:
<div class="space-y-4">
<div class="w-96 bg-white shadow rounded">
w-96
</div>
<div class="w-80 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
...
</div>
The classes bg-white shadow rounded had to be repeated multiple times for each use. There is no way supported by Tailwind CSS to avoid this.
It may seem like the css classes defined by Tailwind are good enough for most use cases. While that may be True, that doesn’t take away the fact the lack of ability to combine multiple styles and give it a name is a serious limitation.
This limitation leads to duplication of code. It may be a lot easier to write them, but this duplication comes a cost of maintanance.
You may argue that even CSS has that limitation. That is not quite true. While you can’t combile styles of multiple selectors, you can still combine a bunch of styles and assign them to a class. Tools like Sass take away even that limitation.
Over all, Tailwind CSS looks like a nice syntacic sugar with easy to use primitives, but it completely takes away the ability to abstract. Is it worth paying that price?
If you liked this article, and interested to study SICP, please checkout The Lambda Retreat, an upcoming in-person immersive workshop.
