Tailwind CSS

December 12, 2021   • tailwind

I’ve been hearing about Tailwind CSS in the developer circles for quite some time now. However, my first few attempts to learn Tailwind failed as I always balked after seeing the cryptic class names and the resulting HTML. Here is an example that shows the contrast between the two approaches.

Regular HTML and CSS

# html
<button class="primary-button">Click Me</button>

# css
.primary-button {
  border: 1px solid #ddd;
  ...
}

Tailwind

<button class="bg-green-500 font-bold py-3 px-4 rounded-lg text-center">
  Click Me
</button>

Now, if you are like me, your first reaction to seeing the new HTML with all these classes might be something like “omg, what a mess”, seeing the principle of separation of concerns thrown out of the window.

However, I was convinced to pick it up again after watching a screencast Adam Wathan (creator of Tailwind) did, where he rebuilt a website in Tailwind step-by-step. It was fascinating to watch him build a responsive, good-looking home page without writing a single line of CSS. I liked the development workflow, too. You change a single class on an HTML element and see it take effect without worrying about any other side effects.

I also discovered that all the cryptic class names are not cryptic once you understand what they are doing. Learning a few base patterns can take you a long way. I am just a couple of hours into my Tailwind journey, but I already feel pretty comfortable with the classes.

Finally, a Tailwind app requires much less CSS. Most of the design comes from the composition of Tailwind’s utility classes. You spend less time naming CSS and managing global CSS, allowing you to spend more effort on your site’s actual display and user experience. Tailwind makes it convenient to make incremental changes, see the results, and repeat.

Since I started web development, web design has always been one of my weak points. I’ve always managed to get by with some rudimentary CSS. For quite a while now, I’ve wanted to improve my design chops in my journey to become a true full-stack web developer. However, I always neglected CSS and front-end design with all other priorities.

With Tailwind 3 released, I feel the timing is just about right for me to get into front-end design and become a better web designer. So along with Ruby on Rails, React, and Postgres, I am adding another tool to my toolbelt. It’s Tailwind.

In the next post, I will explain how to set up Tailwind 3 on an existing Ruby on Rails application.