Stef Coetzee

Rapidly go from zero to deploy with Jekyll and Tailwind CSS by cloning this repo. Read on to learn more.

Jekyll, Really?

Jekyll is the original static site generator (SSG). While JavaScript-powered SSGs are all the rage nowadays, I started off with Jekyll-powered GitHub Pages as part of working through Michael Hartl’s suite of web development courses. (Highly recommended if you’re interested in fullstack web development, but unsure where to start.)

I’ve since discovered Netlify and moved over. Call me old fashioned, but I still like good ol’ Jekyll. (It remains a popular choice in 2021, FWIW.) To install Jekyll, follow the appropriate instructions for your operating system here.

A Design System for Recovering Perfectionists

More recently, Adam Wathan and Steve Schoger took the frontend world by storm with Tailwind CSS. I quite like the idea of a consistent design system within which to create a layout. The perfectionist in me can rest easy, knowing there is someone who knows a great deal more about these things spending a great deal more time on building (and maintaining!) a complete system. I get to gratefully use the end result.

HTML littered with utility class names isn’t for everyone, but I don’t mind it. It’s just not the hill I’m gonna die on. The speed and ease with which it allows one to create and update designs is great. As an added bonus, every Tailwind CSS project doesn’t look the same just because of the shared design system approach. You can customize Tailwind CSS extensively to communicate the look and feel you’d like. Just try not to use Inter as your primary typeface.

How It Works

Given the manner in which Jekyll processes site contents, throwing Tailwind CSS into the mix leads to reload times in excess of five seconds. (For save-triggered reloads, use the --livereload option when serving your site.) That can be a bit of a drag on development.

Can Olcer made a simple, effective suggestion: How about not processing the Tailwind files on every reload? Those files stay the same most of the time, and you could always include them if you’d like. Great suggestion! The result is near-instantaneous reloading. Combine that with a blank Jekyll site, sprinkle in some scripts for building and serving our site, and we’re good to go.

Getting Started

It’s easy to get started, try it out for yourself. Simply clone the repo:

git clone git@github.com:stefcoetzee/jekyll-tailwind your-site

Change your directory to the repo directory and run the setup script:

cd your-site
bin/setup

Build for development:

bin/build-dev

And serve your site at http://localhost:4000:

bin/start

Rip out the placeholder code and have at it. I find mimicking existing designs you like is a great way to kick the tires with a utility-first CSS framework like Tailwind CSS.

Building for production is similarly straightforward:

bin/build-prod

Specify that as build command in your deployment settings. All excess CSS will be purged, leaving behind only what the site needs.

Thanks for reading!

#Jekyll #TailwindCSS

Published:
Join the mailing list
Get new posts in your inbox. Unsubscribe anytime.