Joel Always one syllable, sometimes "@jayroh"

Porting the blog to TailwindCSS

18 Jun 2022

A couple weeks ago I noticed there were some style-related issues here, so I reached for the CSS to make the necessary fixes. Easy enough.

But when I did so - I paused, confused, then realized I had no idea how to edit and rebuild it(?). It had been a long, long, while since I last adjusted the styles.

Side note: remember Compass? This website was using Compass! I loved it! Shout out to a real OG, author of compass and co-founder of Sass, Chris Eppstein. Absolute legend.

The small issue here was that, as it pertains to Compass, I just didn’t recall the conventions around mix-ins, building, file locations, etc. So, like every “good” (air-quotes) writer of software I decided to go the long-way ‘round and re-implement all of the styling with TailwindCSS, the current CSS Belle of the Ball.

Rough steps:

  1. Stripped the site of any and all CSS-related code, assets, dependencies, etc.
  2. Use the jekyll-postcss-v2 plugin.
  3. Installed with their instructions, except for the npm dependencies, which they instruct that you install via npm i -D postcss postcss-cli. If you are using Netlify to build and deploy your website (as I do), then make sure to omit the -D because if and when you set JEKYLL_ENV to production then npm won’t install whatever is inside the devDependencies key of your package.json.
  4. Rewrite the old styles using the new framework. AKA, “draw the rest of the owl”

The process was pretty straightforward and relatively painless if you run your local Jekyll server with jekyll serve --livereload, and have your editor, work in progress in one browser window, and your source/reference in another browser. The Tailwind docs workflow for Alfred also came in handy for all of the documentation reference.

Final thought part 1: while doing this bit of work I took the opportunity to examine the blog’s performance via Lighthouse and made some further changes to improve its score. I’ll add some details related to that in a follow-up post.

Final final thought: additional shout-out to Dan for the original design and CSS for this website. Literally couldn’t have done this without you, Dan. Thank you 😄.