TailwindCSS: First Impressions

After a bit of procrastination, I decided to try out Tailwind CSS. Late last year, the v2.0 release caught my attention by generating buzz among my colleagues. After seeing the impressive selection of Tailwind UI components, I needed to try it out. To do so, I migrated this site to Tailwind CSS.

Overall, the migration was pretty painless. Since the codebase already used rem units extensively, Tailwind's system of (mostly) rem-based utility classes was a natural fit. I enjoyed the intuitive naming and sizing conventions for the utilities that come out of the box. I didn't encounter a single hand-written style that didn't have a Tailwind equivalent; even the relatively uncommon letter-spacing property has a corresponding tracking utility. Ultimately, the switch took a matter of hours.

I encountered two small hurdles, though they had fairly quick resolutions:

1. Specificity issues on markdown-templated code blocks. I use react-markdown and react-syntax-highlighter for code snippets on this site. In order to style these blocks consistently, I needed to add utility classes like text-xs and rounded on any pre and code elements wrapping the code snippets. At the same time, my CodeBlock component applies syntax highlighting via the style attribute of those same elements, including some conflicting styles. In order to override these, I needed a way for the text-xs and rounded utility classes to be applied with the !important property. As it turns out, this feature was recently added in the v2.1 release: I simply needed to enable Just-in-Time Mode add and prepend exclamation points to the utility classes, like so: !text-xs and !rounded.

2. Adding utility classes or styles to the markdown-templated blog posts, for example to control heading sizes or paragraph margins. As it turns out, this is a common issue. The Tailwind team provides the @tailwindcss/typography plugin to serve this exact purpose. I added this plugin to my configuration, tweaked a few of its default settings, then was done.

Overall, the experience of briefly working with Tailwind was a positive one and I look forward to using it for small sites or web applications in the future.