Jekyll + Tailwind CSS boilerplate

jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer

Jekyllwind: a Jekyll + Tailwind CSS boilerplate

This boilerplate is based on the following blog post. If you run into any issues during setup, try to follow the steps laid out in there, it may help.


1. Download the boilerplate

Create a directory for your project and download the latest Jekyllwind in it.

A fancy way to do it is this:

mkdir YOUR_PROJECT && cd YOUR_PROJECT && git init
curl -L | tar -xz --strip-components=1

This is tested and works on macOS Monterey. If it doesn't work as expected on your machine, you can take an alternative route and download the boilerplate manually from the GitHub UI:

  • Option 1: get the latest release and unzip in your project directory
  • Option 2: download the repository as zip, unzip somewhere, and copy the contents of the dist/ folder into your project directory

2. Install Ruby gems and Node packages

In your terminal cd to the project directory and run the following commands:


Note for npm users: If you prefer installing packages via npm instead of yarn, open the _config.yml file in your editor and replace yarn.lock with package-lock.json on line 15.

That's it, you are ready 🎉

Deployment tips

1. Netlify

You may need to alter the default build command to JEKYLL_ENV=production bundle exec jekyll build. More details available here.

2. GitHub Pages

Since this boilerplate uses PostCSS, it won't work on GitHub Pages out of box. Instead, you will need to use GitHub Actions. Step-by-step instructions available at OhSoStatic Jekyll.


Feel free to send PRs or beers 🙌



jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer

Get New Themes & Resources