secture & code

Tailwind is to programming what the plague was to medieval Europe

The beginnings

At the beginning of the century, calling from a cell phone weighing half a kilo cost 300 pesetas a minute, a 32-inch television was scandalously large and it took two big countrymen to move it, computer monitors were 14 inches and it was modeled with tables and styles in line.

Is Tailwind evolution or a sick joke of fate? In this article we review how we went from HTML with inline styles to the modern chaos of utility classes. A clear (and anesthetized) critique of the utility first approach and the overuse of Tailwind. If you love clean CSS, this is going to hurt... or love it.

CSS Specification 1 had already been published in 1996 and la 2 in 1998, but nothing prevented us from committing criminal acts such as this one:

<body bgcolor="#f0f0f0f0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

    <h1 align="center" face="Arial" color="#33333333">Welcome to Mi Página Web</h1>

    <hr noshade size="2" color="#cccccccc">

    <p align="justify" face="Verdana" size="2">
        This is an example of an HTML4 page that uses attributes to apply styles. 
        Here you can see different HTML elements and how they can be styled.
    </p>

    <h2 align="left" color="#006600">Section 1: Lists</h2>
    <ul>
        <li color="#0000ff">List item 1</li>
        <li color="#0000ff">List item 2</li>
        <li color="#0000ff">List item 3</li>
    </ul>

    <h2 align="left" color="#006600">Section 2: Table</h2>
    <table border="1" cellpadding="5" cellspacing="0" align="center" bgcolor="#ffffffff">
        <tr bgcolor="#cccccccc">
            <th color="#000000">Name</th>
            <th color="#000000">Age</th>
        </tr>
        <tr>
            <td color="#000000">John</td>
            <td color="#000000">25</td>
        </tr>
        <tr>
            <td color="#000000">Maria</td>
            <td color="#000000">30</td>
        </tr>
    </table>

    <h2 align="left" color="#006600">Section 3: Links</h2>
    <p>
        Visit <a href="https://www.ejemplo.com" target="_blank">Example</a> for more information.
    </p>

    <h2 align="left" color="#006600">Section 4: Image</h2>
    <img src="https://via.placeholder.com/150" alt="Example image" width="150" height="150" align="middle" border="0">

    <h2 align="left" color="#006600">Section 5: Form</h2>
    <form action="#" method="post">
        <label for="name" style="font-weight: bold;">Name:</label>
        <input type="text" id="name" name="name" size="30" border="1">
        <br><br>
        <input type="submit" value="Send" bgcolor="#008000" text="#ffffffff">
    </form>

    <hr noshade size="2" color="#cccccccc">
    <div align="center" size="2" color="#66666666">
        © 2023 Mi Página Web. All rights reserved.
    </div>

</body>

Nice, isn't it? Evidently, this was totally unsustainable, and good practices and also common sense recommended using CSS for the sake of cleanliness, reusability, maintenance and so on. By using CSS we would maintain style consistency by sharing CSS files between different HTML documents, we would have our code more readable and it would be much easier to maintain. The above monstrosity would look something like this:

/* styles.css */

.body {
    background-color: #f0f0f0f0;
    color: #000000;
}

.header {
    text-align: center;
    font-family: Arial, sans-serif;
    color: #333333;
}

.subheader {
    color: #006600;
}

.paragraph {
    text-align: justify;
    font-family: Verdana, sans-serif;
    font-size: 14px;
}

.list-item {
    color: #0000ff;
}

.table {
    border-collapse: collapse;
    margin: auto;
    background-color: #ffffffff;
}

.table-header {
    background-color: #cccccccc;
    color: #000000;
}

.table-data {
    color: #000000;
}

.link {
    color: #0000ff;
}

.footer {
    text-align: center;
    font-size: 12px;
    color: #666666;
}

.input-text {
    border: 1px solid #000000;
}

.input-submit {
    background-color: #008000;
    color: #ffffffff;
}

hr {
    border: none;
    height: 2px;
    background-color: #cccccccc;
}

img {
    display: block;
    margin: 0 auto;
}

table {
    border: 1px solid #000000;
}

td, th {
    padding: 5px;
}

<body class="body">

    <h1 class="header">Welcome to Mi Página Web</h1>

    <hr>

    <p class="paragraph">
        This is an example of an HTML4 page that uses CSS to apply styles. 
        Here you can see different HTML elements and how they can be styled.
    </p>

    <h2 class="subheader">Section 1: Lists</h2>
    <ul>
        <li class="list-item">List item 1</li>
        <li class="list-item">List item 2</li>
        <li class="list-item">List item 3</li>
    </ul>

    <h2 class="subheader">Section 2: Table</h2>
    <table class="table">
        <tr>
            <th class="table-header">Name</th>
            <th class="table-header">Age</th>
        </tr>
        <tr>
            <td class="table-data">John</td>
            <td class="table-data">25</td>
        </tr>
        <tr>
            <td class="table-data">Maria</td>
            <td class="table-data">30</td>
        </tr>
    </table>

    <h2 class="subheader">Section 3: Links</h2>
    <p>
        Visit <a href="https://www.ejemplo.com" target="_blank" class="link">Example</a> for more information.
    </p>

    <h2 class="subheader">Section 4: Image</h2>
    <img src="https://via.placeholder.com/150" alt="Example image">

    <h2 class="subheader">Section 5: Form</h2>
    <form action="#" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" class="input-text" size="30">
        <br><br>
        <input type="submit" value="Send" class="input-submit">
    </form>

    <hr>
    <div class="footer">
        © 2023 Mi Página Web. All rights reserved.
    </div>

</body>

What does this second version offer us? A much cleaner HTML code, completely separated from the styles. These styles can be used in multiple HTML documents, so we write them once and we can continue to expand styles as we need. We can also split the CSS file into several files according to our needs. In addition, we can make changes to the styles without having to modify any HTML document.

CSS preprocessors

The adoption of CSS was undoubtedly a huge improvement when it came to facilitating the creation of readable and easily maintainable code, but it had some shortcomings such as the use of variables and functions. This is when the CSS preprocessors.

Preprocessors offer the possibility of creating variables, functions, nesting of selectors, reuse of code blocks by means of the so-called mixins, etc. With the use of CSS preprocessors, a step forward was taken in the readability, maintenance and reuse of styles. A real marvel.

Our previous CSS file could be changed to look like this using SASS:

// Variables
$background-color: #f0f0f0f0;
$text-color: #000000;
$header-color: #333333;
$subheader-color: #006600;
$list-item-color: #0000ff;
$table-header-bg: #cccccccc;
$table-data-color: #000000;
$link-color: #0000ff;
$footer-color: #666666;
$input-border-color: #000000;
$input-submit-bg: #008000;
$input-submit-color: #ffffffff;
$hr-color: #cccccccc;
$table-border-color: #000000;
$padding: 5px;

// Mixins
@mixin center {
  display: block;
  margin: 0 auto;
}

@mixin text-style($font-family, $font-size, $color) {
  font-family: $font-family;
  font-size: $font-size;
  color: $color;
}


.body {
  background-color: $background-color;
  color: $text-color;
}


.header {
  @include text-style(Arial, inherit, $header-color);
  text-align: center;
}


.subheader {
  color: $subheader-color;
}


.paragraph {
  @include text-style(Verdana, 14px, inherit);
  text-align: justify;
}

.list-item {
  color: $list-item-color;
}


.table {
  border-collapse: collapse;
  @include center;
  background-color: #ffffffff;
}

.table-header {
  background-color: $table-header-bg;
  color: $text-color;
}

.table-data {
  color: $table-data-color;
}


.link {
  color: $link-color;
}


.footer {
  @include center;
  font-size: 12px;
  color: $footer-color;
}


.input-text {
  border: 1px solid $input-border-color;
}

.input-submit {
  background-color: $input-submit-bg;
  color: $input-submit-color;
}


hr {
  border: none;
  height: 2px;
  background-color: $hr-color;
}


img {
  @include center;
}


table {
  border: 1px solid $table-border-color;
}

td,
th {
  padding: $padding;
}

We will no longer have to search for this or that color to change it everywhere or repeat over and over again the same code blocks to define a typography, among other things. The power of CSS preprocessors comes to the fore especially in large and complex projects.

Utility layers and approach utility first

In the field of CSS styles we can speak of utility layers when we have highly reusable classes that apply a single property or a very small set of properties. Thus, we can have, for example, a class named .bg-red and thus apply a red background color to any element. They are very useful when you need to modify a specific property of an element without having to write a new class specifically for it.

The problem with this way of working is that it can easily get out of hand when we put all the styles in the utility class. This approach is what is known as utility first, where we create a CSS class for almost every property. So, if we want something like this:

Our code, following the utility first would look something like this:

.w-300 {
  width: 300px;
}

.h-300 {
  height: 300px;
}

.bg-blue {
  background-color: #1e4fcb;
}

.text-white {
  color: #fff;
}

.font-arial {
  font-family: Arial, Helvetica, sans-serif;
}

.text-lg {
  font-size: 1.2rem;
}

.border-4 {
  border-width: 4px;
}

.border-solid {
  border-style: solid;
}

.border-blue {
  border-color: #071a4c;
}

.rounded-5 {
  border-radius: 5px;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

<div class="w-300 h-300 bg-blue text-white font-arial text-lg border-4 rounded flex justify-center items-center">
  <p>Lorem ipsum</p>
</div>

Of course, it doesn't make much sense to write all the utility classes in each project, so we take them from project to project and add what we need for each one. But, evidently, it is impractical and quite heavy.

Then came Tailwind. Tailwind is a CSS framework that gives us a whole set of utility classes ready to use. More than 4000 classes ChatGPT tells me. Ideal for styling without knowing CSS. Optimal for not having to write a single line of CSS. The framework of choice for those youtubers who make you a Netflix clone (😂) in half an hour and don't want to stop to write styles. Thank you! I don't have to learn CSS anymore! Just with Tailwind's reference I can make super cool interfaces!

The aberration

Wait, not so fast. You will have to know something about CSS because if not many class names you won't know very well what they are for. And well, taking into account that there are only 618 CSS properties, At first sight, it doesn't seem such a good deal, but what do I know.

That said, our initial example HTML would look like this using the power of Tailwind:

<body class="bg-gray-100 text-black">
    <h1 class="text-center text-3xl font-sans text-gray-800">Welcome to Mi Página Web</h1>

    <hr class="border-0 h-2 bg-gray-300" />

    <p class="text-justify font-serif text-base".">
      This is an example of an HTML4 page using Tailwind CSS to apply styles. Here
      you can see different HTML elements and how they can be styled.
    </p>

    <h2 class="text-left text-2xl text-green-700">Section 1: Lists</h2>
    <ul class="list-disc pl-5">
      <li class="text-blue-600">List item 1</li>
      <li class="text-blue-600">List item 2</li>
      <li class="text-blue-600">List item 3</li>
    </ul>

    <h2 class="text-left text-2xl text-green-700">Section 2: Table</h2>
    <table class="border-collapse mx-auto bg-white border border-black">
      <tr>
        <th class="bg-gray-300 text-black p-2">Name</th>
        <th class="bg-gray-300 text-black p-2">Age</th>
      </tr>
      <tr>
        <td class="text-black p-2">John</td>
        <td class="text-black p-2">25</td>
      </tr>
      <tr>
        <td class="text-black p-2">Maria</td>
        <td class="text-black p-2">30</td>
      </tr>
    </table>

    <h2 class="text-left text-2xl text-green-700">Section 3: Links</h2>
    <p>
      Visit
      <a href="https://www.ejemplo.com" target="_blank" class="text-blue-600">Example</a> for more
      information.
    </p>

    <h2 class="text-left text-2xl text-green-700">Section 4: Image</h2>
    <img src=“https://placehold.org/150x150/3399ff" alt="Example image" class="block mx-auto" />

    <h2 class="text-left text-2xl text-green-700">Section 5: Form</h2>
    <form action="#" method="post" class="mb-4">
      <label for="name" class="block">Name:</label>
      <input type="text" id="name" name="name" class="border border-black p-2 mb-2"." size="30" />
      <br />
      <input type="submit" value="Send" class="bg-green-700 text-white p-2" />
    </form>

    <hr class="border-0 h-2 bg-gray-300" />
    <footer class="text-center text-sm text-gray-600">
      © 2023 Mi Página Web. All rights reserved.
    </footer>
  </body>

Wait a minute, there's something weird going on here. Why do I feel like gouging my eyes out? Have we inadvertently climbed into a DeLorean and gone 30 years back in time? Doesn't it look too much like the first example without CSS?

Using Tailwind's utility first approach, what we are doing is directly adding a class to each element for each CSS property we want to customize, that is, doing exactly the same as we did before the existence of CSS, and turning our code into something quite unreadable, dirty and unmaintainable.

To solve this mess, the brilliant minds behind Tailwind decided to bring out the @apply board, What does this consist of? Well, to see it, nothing better than an example. The code of our div blue with centered white text that we saw above to explain the utility classes would look like this if we use Tailwind:

<div class="w-[300px] h-[300px] bg-[#1e4fcb] text-white font-sans text-lg border-4 border-[#071a4c] rounded flex justify-center items-center">
  <p>Lorem ipsum</p>
</div>

Of course, this dozen of classes makes readability and maintenance a bit difficult, so we will use the @apply directive:

.my-stunning-tailwind-class {
  @apply w-[300px] h-[300px] bg-[#1e4fcb] text-white font-sans text-lg border-4 border-[#071a4c] rounded flex justify-center items-center;
}

<div class=“my-stunning-tailwind-class”.”>
  <p>Lorem ipsum</p>
</div>

Ah, sure, it makes sense, great solution. This way we group everything in a class, include the CSS and everything is much cleaner and maintainable.

But let's see, ISN'T THAT THE BEGINNING OF IT ALL? What's the point of using a CSS framework so we don't have to write CSS and then have to group the classes from that framework into our own CSS classes? Why don't we just skip all this and use CSS directly?

We live in strange times: beer and gin without alcohol, hamburgers at the price of sirloin steak and frameworks that come to solve problems that do not exist, creating others that were already solved... Skynet, wake up and put an end to all this nonsense, please.

If you're still hungry, there's more wood at secture.com/blog