Tailwind CSS first impressionsNovember 29, 2020
Last week I rebuilt my personal website with Tailwind.css, a CSS framework that uses utility classes to compose interface styles. Having used it for a week on a handful of areas (like moving an entire website into a single page on my site), here are my first impressions.
- This is the most important pro, and outweighs all cons listed below: using Tailwind lets me style the frontend of my website as fast as I can think it. It's really that simple. If I can visualize a layout, I can basically create and style that layout at roughly the same rate as my brain. This is a superpower. Compare this to some of my previous workflows, where every element needed to be extracted out into a
styled-componentand I had to constantly juggle files, imports, and exports. It's night and day, and I'm really excited by this.
- Things are mostly intuitive. Once you start learning the Tailwind vocabulary, you can start to predict how a given utility class will be named without ever having looked it up in the docs. There are a few notable exceptions - see my cons below - but for the most part it's really easy to guess your way towards correctness.
- The defaults are pretty good. Sensible defaults can make or break a framework like this, and I suspect that Tailwind's base configuration for color, type, and spacing will get most people to a mostly good website. The best example of this is the typography plugin which gives you access to a
proseclass. This class makes all of its children elements look...pretty good! If you are just trying to style a blog post or block of long-form content with some basic paragraphs, lists, and block quotes, this single utility class will save you so much time. I use it everywhere, and have only needed to eject a few times in my configuration file to make things fit in better on my site.
- I'm 99% sure I'm doing something wrong, but whenever I update my root
tailwind.cssfile, it takes forever to recompile my Next.js project. Sometimes 10-15 seconds (where a normal file change should hot reload my page in less than a second). I've tinkered with compilation settings, like avoiding CSS purging in
developmentmode, but that broke production deploys. Clearly I'm doing something wrong, but the fact that it's not "built in" to the Tailwind ecosystem to optimize for local development feels wrong. I would love to see a stronger enforcement of great conventions built into the entire framework so that people don't have to even bother reading docs for "how do I purge unused styles?" – this should be the default behavior, with intelligent changes based on the environment.
- Update: 10 minutes after publishing this post, Paco Coursey jumped in with a pull request that dramatically speeds up local development compliation times.
- I've been writing CSS for years and years, so when Tailwind breaks my vocabulary I'm forced to stop, think, refer to the docs, and relearn a new way of working. For example, in CSS you can set the
visible. In Tailwind, the utility classes for
invisible, which is really odd. Simultaneously, if you want to
display:nonean element, Tailwind has the utility class
hidden. Confused? Me too. These are backwards:
visibility, and there should be a discrete
display-noneutility. There are a handful of examples like this that make you stop and think, and each time it's breaking years of learned vocabulary.
- In theory, every design can be perfectly created with a clean layout and spacing system. In practice, you need ways to nudge things by 1px at a time to their optical correctness. In Tailwind this is really hard to do. There's not an easy way to say "this should be
pt-4but I need one extra pixel of top padding." For this reason I still keep
styled-componentsaround in my project as an escape hatch. twin.macro seems like it might solve my problem, so I'll explore this next.
Tailwind CSS is very good, and I'm already happy that I took the time to learn it while refactoring my personal website. It's so much easier to make changes now, in the spirit of incrementally correct personal websites. This being said: I'm still bad at Tailwind. There is a learning curve, a new vocabulary, a new way to think about abstractions and overrides and customization, and I can tell that I've barely scratched the surface of what's possible. And that's a good thing: there's a lot left to learn.