The conventions and philosophy of Tailwind make quick work of converting a design to HTML/CSS.
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.
The test user is me! Here are a few quick things to keep in mind when reading this friction log:
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.
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.
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.
The installation / getting started guide assumes I had a project setup, assumed I knew what a “directive” is.
cmd+click in to a tailwind core file doesn’t do anything in VS Code
The documentation assumed I know what PurgeCSS is.
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.
The VSCode plugin doesn’t always work and it’s not clear why.
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.
The documentation snippets allow you to adjust responsive behavior, a very nice detail.
Every utility has easy and quick to understand examples. The documentation supports quick skimming. There are some really handy utilities (like the placeholder text).
The plugin ecosystem is great. Augmenting Tailwind is easy and straightforward.