Summary#
- Gatsby upgraded to v5
- MDX upgraded to v2 (affects post content)
- Upgraded TypeScript to v5 for ESM compatibility
- Can now switch between light and dark modes
- Converted style engine to TailwindCSS
- Deprecated usage of Bootstrap and Sass
Details#
While new content has been on hiatus on this site, I was busy working on the next major version upgrade. As you probably know, this site runs on Gatsby and was on version 4 for most of its life. This upgrade is centred around upgrading to Gatsby v5 and MDX v2. This makes it easier for me to create engaging and interactive content on my posts, and also allows me to leverage modern JavaScript. Additionally, these changes allow me to use the Gatsby API for some features that were otherwise handled by external packages.
With a major version change, there is an opportunity to bake in additional changes that would justify a major version number increment. I took that opportunity to deprecate my usage of Bootstrap and Sass in favour of TailwindCSS. I was struggling with this decision for a while, but it was worth it in the end as I now have more control over the design of the website. While there are some tradeoffs with using Tailwind vs Bootstrap, these shortcomings were worth it to make the change.
One such issue I had was in managing the complexity of the Tailwind class names in the classNames
prop. I tried using template strings to aid in organizing long class lists, but that solution
resulted in unwanted whitespace being rendered in the DOM.
There are several utilities
available for managing Tailwind classes,
none of them had the features I wanted, or they introduced unacceptable complexity.
This despite being interesting approaches to the same problem. I ended up creating a custom tool to do
the job as simply as possible. You can find tagged-classnames
on NPM and GitHub.
One major motivation for me to switch to TailwindCSS is the ease of managing multiple themes and media queries. Using Sass eased the burden of managing media queries while using Bootstrap, but I would sometimes find complex stylesheets containing them difficult to read. Also, it would have been difficult for me to implement multiple themes since Bootstrap is highly opinionated. Thanks to Tailwind this website now has switchable light and dark modes to accommodate different reading preferences.
Remaining changes are behind the scenes and have minimal impact on user experience. They do help me deliver useful content here more frequently by lessening the maintenance overhead. I hope you enjoy the improved user experience, and you can look forward to interesting features and content.