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.
styled-componentand I had to constantly juggle files, imports, and exports. It's night and day, and I'm really excited by this.
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.
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.
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.
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.
A small favor
Was anything I wrote confusing, outdated, or incorrect? Please let me know! Just write a few words below and I’ll be sure to amend this post with your suggestions.