Tailwind, Hugo and dx13

For the longest time – well, since before 2010, so over thirteen years, which is pretty much forever in internet time – this site has used extremely old-school CSS. Almost everything in the stylesheet would’ve likely been recognisable to anyone visiting the CSS Zen Garden back in in 2003. I think float was about the most modern directive. The primary CSS file, centred.css, has been adapted a couple of times to tweak the design, notably to create a mobile version of the site in 2011, but the core has remained static for a long time.

A couple of years ago, I came across a post extolling the virtues of a CSS framework called Tailwind. I’d stopped following frontend design before 2010, hence centred.css being so venerable. This meant tools like SASS had largely passed me by. But Tailwind caught my attention, and I wrote in my notes:

Looks like a pretty smart and relatively simple system. I like the fact it’s basically zillions of complementary styles to apply. This might make some future dx13ing easier.

And then mostly forgot about it.

Fast-forward a couple of years, and I’d become increasingly frustrated with my inability to get the article formatting to my liking on dx13, despite numerous attempts over the last several years. In particular, in-article headings always looked wrong to me.

Tailwind popped back up in an article I was reading, and what caught my eye was mention of the typography plugin which claimed:

beautiful typographic defaults to any vanilla HTML […], like HTML rendered from Markdown

I write dx13 posts in markdown. Given I already had the Tailwind approach to styling in the back of my mind, I decided to have a go with it to see if Tailwind and its typography plugin could fix my iffy article formatting. To give myself a constrained goal, I decided I wanted to avoid redesigning the site. Instead, I’d focus on Tailwind, integrating the typography plugin and bringing in more modern layout techniques like like flexbox.

Hugo and Tailwind

First, I needed to get Tailwind paired with Hugo, which I’ve used to render the site since 2019. I added Tailwind to my existing site by adapting the approach in Hugo and Tailwind CSS 3.0. I next elected to rebuild the design from scratch, rather than slavishly recreating the existing CSS (from centred.css) using Tailwind’s utility classes. This would also allow me to integrate those newer layout options.

The rebuild turned out to be easy. Tailwind’s preflight cross-browser baseline gives a good start. I then was able to rely heavily on Tailwind’s Typography plugin for the article body styling, which covers a lot of ground for a blog like this one. This left the header and footer styling, which is simple stuff, along with some special casing for the tag and article archive pages. Using tailwindcss --watch alongside Hugo’s live reload in the browser made it really simple to iteratively build up the design. It took about an afternoon.

Results

As my goal was not 100% fidelity to the old design, I made a few changes along the way that I felt improved things:

• The articles themselves render quite differently. Tailwind’s Typography plugin is quite opinionated, particularly around using whitespace. But I like how it looks just fine, and it certainly finesses some edge cases that I had not previously addressed.
• I was taken by Tailwind’s Stone built in colour palette, so opted to use that throughout the site. The main visible difference here is that the main site background is now slightly off-white.
• I fixed a long standing bugbear in the articles archives, where post titles would wrap underneath their associated date. Now they stay nicely to the side of the date even when wrapping. This is particularly noticeable on mobile.

Bonus feature

I also added something completely new: dark mode 🌟. I’d been pining after a dark mode variant for a few years, but never enough that I could face both (a) learning the underlying way to switch between light and dark styles; and (b) actually creating the dark mode style. Tailwind totally negated both these issues for me:

• First, it does all the hard work of applying the right light or dark style for you, you just add extra classes with names prefixed with dark: for your dark theme. The Typography plugin also supports dark mode, altering its accent colours appropriately. So essentially dark mode is taking every place I defined a colour and sticking in a dark: class with something appropriate. For this site, that turns out to be very few places.
• Second, to avoid making up a whole new colour scheme, I was able to reuse the Stone palette for my dark mode – just inverted.

While it’s simple, I love how my dark mode looks. Thanks Tailwind 💪

Parting thoughts

I was surprised and pleased at how easy Tailwind was to use in the context of this site. I thought it’d be much harder. The project has done an excellent job making the system approachable. While I can see it really comes into its own when creating components and large sites, even for something as simple as dx13 it was easy to integrate and never felt like overkill. And being able to leverage all that work to create a dark mode for dx13 in about an hour was amazing. I’m glad Tailwind popped back up in my stream.