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.
It’s easy to get started, try it out for yourself. Simply clone the repo:
git clone email@example.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:
And serve your site at
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:
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!