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 remained 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.
Just in Time
Given the manner in which Jekyll processes site contents, throwing Tailwind CSS
into the mix used to lead to reload times in excess of five seconds.
(For save-triggered reloads, use the --livereload option when serving your site.)
That could 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!
Adam and company added on-demand style generation in Tailwind CSS v2.1, through what they call Just-in-Time Mode (JIT). This didn’t work with Jekyll until September 2021.
To enable JIT, add the following configuration
to tailwind.config.js:
[Irrelevant code block removed.]
JIT is enabled by default in Tailwind CSS v3.
Thanks to the work done by Tristan Dunn,
disable caching
for the jekyll-postcss plugin in _config.yml:
# _config.yml
# ...
postcss:
cache: false
# ...
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
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.
Thanks for reading!
