First Time ExperienceMay 24, 2020

TailwindCSS

The conventions and philosophy of Tailwind make quick work of converting a design to HTML/CSS.

with Rick Blalock

My first venture into TailwindCSS was generally a pleasant experience. The conventions and philosophies of the framework are made clear from the beginning. Those core values empowered me to quickly convert a design into HTML/CSS without having to touch a bunch of CSS at all. I was impressed.

About the tester and the friction log

The test user is me! Here are a few quick things to keep in mind when reading this friction log:

  • I’m well versed in front-end things (for 15+ years)
  • I don’t consider myself an expert in CSS but I feel comfortable doing almost anything with it
  • I’ve heard a lot about Tailwind. Prior to doing the friction log, I had read the core tenants, approach, etc. I read up on what some nay-sayers had said, what some of the fans had said, etc.
  • I had never used Tailwind before this test.

With those points in mind: The goal of this friction log was to take a Figma design and transform it into HTML/CSS using Tailwind.

Logs 13

General

Documentation around containers

I found it nice that the documentation writer considered the fact that I’d be familiar with the bootstrap style container and pointed out some important differences right a way.

General

Sidebar Information

The long list of features in the sidebar of the documentation area is simultaneously helpful and overwhelming. On the positive side, being able to cmd+f (search) to look for a utility function and find it right away is great. Everything in the sidebar helps with that. On the negative side, it can feel daunting as a newcomer. It certainly gave me a little FOMO as I was going through things. Hick’s law and Miller’s law comes to mind here.

Friction

Installation / Getting Started

The installation / getting started guide assumes I had a project setup, assumed I knew what a “directive” is.

Friction

Getting Started Templates

I had a small out of churn trying to find a good project starting point. The playground repo seemed like a good place but it wasn’t clear if it that was the right call. In the end I used a create-react-app + tailwind starter.

Friction

VSCode `cmd+click`

cmd+click in to a tailwind core file doesn’t do anything in VS Code

Friction

PurgeCSS

The documentation assumed I know what PurgeCSS is.

Friction

Community Starter Kit

The community starter kit I used had several warnings when I opened it and it wasn’t immediate clear if I should continue using something like this.

Friction

VSCode Intellisense

The VSCode plugin doesn’t always work and it’s not clear why.

Blocker

Fonts

I got stuck trying to use custom fonts in Tailwind.
After some googling, this post fixed it . It was a really simple mistake and with a little bit of reading comprehension from the docs I should’ve figured it out. I actually read this in the beginning but failed to grasp all the ramifications.

Friction

Dark Mode

There are some nice dark mode plugins for Tailwind but it’d be nice if it supported it out of the box.

Looking for dark mode support introduced me to Tailwind variants, which is a powerful feature of the framework.

Delight

Responsive Snippets

The documentation snippets allow you to adjust responsive behavior, a very nice detail.

Delight

Great Examples

Every utility has easy and quick to understand examples. The documentation supports quick skimming. There are some really handy utilities (like the placeholder text).

Delight

Ecosystem

The plugin ecosystem is great. Augmenting Tailwind is easy and straightforward.

Sign up for updates

Friction Log © 2020.