TailwindCSS - My Grumpy Views

November 17, 2017

A few months ago, I remember Adam Wathan tweeting about a CSS framework he was building, titled Tailwind (it came from building his KiteTail app).  I turned thirty this year, and that seems to have made me a grumpy old developer.  I used to see something new and want to be the first one using it, on the bleeding edge of technology.  Five years ago I would have been so excited to see this.  Why was I grumpy?  Utility-first CSS was why!

Utility-first CSS seemed to me like nothing better than writing inline styles.  We, as an industry, moved away from writing inline styles and started using style-sheets for many reasons.  Separations of concerns was one, and also the ability to refactor your code.  I saw some examples of Tailwind online, and was disgusted to see code like this:

<img class="w-24 rounded rounded-full border-4 border-white absolute pin-l pin-b -mb-8 ml-4" src="..." />

Can you imagine if you wanted to have a bunch of images look the same, re-using the same massive group of classes?  Think of what would happen if management or your client came to you and said "Hey, let's make all the images not have that white border".  Now you will have to search through your files and find all of those classes scattered among your HTML (or JavaScript if you are using templates in a framework such as React, Vue, etc).

The Good Parts

Tailwind does allow you to make extremely quick mock-ups and proof of concepts.  I finally gave in to my grumpiness and read through the docs, and started playing with the code on CodePen.  The first thing I did was a recreation of a Twitter profile card, which actually landed on the front-page of Codepen.  You can view the pen and the source code here.

I also started playing with making my own set of alert boxes.  First, I started by recreating a couple of the examples from the Tailwind docs, then made some modifications to design my own.  Again, you can view the code on Codepen.

I'm Not So Grumpy Anymore

The ability to make these components is super simple with Tailwind.  But what about a real application?  I'm not talking about a TODO app or something you just bang out one afternoon; I'm talking a large application.  How do we manage all of these classes, and how do we manage large design changes on a project?  Here is the answer that changed my opinion of Tailwind: it is component-friendly!  This means that you can actually take those globs of classes that you want to use for every image, or button, or notification box, and create a component out of them.  This single feature is what really made me see the light.  You still get the ability to make awesome design components extremely quickly, and you can put those ideas to use into components that you can use throughout your project!

I am too far into KickoffWP.com to be willing to refactor everything to use Tailwind, but I do plan to utilize the framework in my next project.

Next: TailwindCSS Components Workflow Process

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2019 Chris Perko

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram