Playing with TailwindCSS

I *love* playing with new toys :) and as a developer my toys are the tools I use. I feel so lucky that things in the web world are developing in such a fast pace, so that we have a new toy every few months or so! Recently I heard about the new cool kid — TailwindCSS, so I decided to give it a try.

tl;dr Tailwind is a great tool. I was able to achieve very nice results for a very limited time (consider few hours over the weekend), basically my speed of developing/prototyping a web template has increased at least 2x if not more.

So what exactly TailwindCSS is about? Copied directly from its website:

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

But what does this mean? It means that the framework provides basic composable classes that helps you build whatever you want in terms of UI. What’s cool in this is that you basically have pre-made helper classes for almost everything that modern web provides — display, typography, alignment, flexbox utilities, borders, spacings, sizes and on and on. But wait! There is more — all this can be easily customised and configured so one can achieve exactly what his fellow designer came up with. Tailwind is also easily extensible and configurable. I’ve already stumbled upon some custom add-ons, which I believe will become more and more as the user base grow.

But how on earth this all speeds up the development process?

To be honest, I don’t really know where the magic is, but to me this whole thing was pretty easy to digest and remember. Once I got used to the class names and memorised some of them, it was pretty easy to build stuff that otherwise takes me hours to figure out. Remember the last time you had to google for a nice box shadow template? Or figure out proper font sizes, spacings and line-height? It takes a while to nail it and I believe this is what added speed to my development process. Straight to an example:

<div class="shadow-lg p-4 w-1/2 mx-auto h-24">Oh, hai there!</div>

and you get nice little, centered, padded, box with shadow, variable width and fixed height (try it here). Let’s decode this example:

shadow is the utility class for drop shadow, shadow-lg stands for large shadow (and yes it’s a nice soft shadow :))

p is the padding class and 4 stands for the padding size (0, 1= .25rem, 2=.5rem … 4=1rem).

w-1/2 is the width utility and (as you probably guessed) 1/2 means 50% of width, the same way

h is the height utility and 24 is the height size (24 = 6rem).

mx-auto — m for margin x for x axis (left and right) and auto is just auto :) so it becomes margin: 0 auto

As I have already mentioned, once you get used to those classes it’s very easy to start applying those on the fly. The best part that I really like is that Tailwind provides a way to extract your styles in components via the@apply keyword, so converting an already existing element to a component is fairly easy:

.btn {
  @apply bg-blue text-white font-bold py-2 px-4 border-b-4 border-blue-dark rounded; 
}
.btn:hover {
  @apply bg-blue-light border-blue;
}

and we have successfully converted the 3D button example here to a component we can reuse. For me this is pretty helpful as I can style elements on the fly and then only copy the classes and make components out of it, no more style="..." while experimenting, yay :) This made me at least 2 times faster when prototyping/building something, and removed huge part of iterations from my flow.

I’ve tried Tailwind with Ruby/Rails and webpacker — pretty easy to integrate. It works with Elixir/Phoenix and Brunch as well — the issue here is if you decide to have tailwind inside scss, it doesn’t work but will be probably solved at some point (discussion here).

I strongly recommend trying Tailwind as there is a chance that you will find it as much enjoying and productive as I did. Share your experience in the comments below. I’ll be happy to see some.

Cheers!