Jekyll & Tailwind CSS Boilerplate

A bare bones Jekyll site which comes preconfigured to use Tailwind CSS for styling.

👉 Try the demo here.

Features

• 🤍 Ships free of styling or theming. Add a theme or get started with Tailwind CSS.
• 📈 Ships Google Analytics and SEO ready
• 🍕 Dev mode: your Jekyll site is refreshed on file changes and all Tailwind CSS classes are available for use.
• 💻 Release mode: CSS is optimised by striping out unused classes and minifying the file.

👟 Install

Ensure Ruby and npm are installed then setup the project:

npm run setup

🍕 Develop

npm start

Open your page on localhost:4000. Parcel and Jekyll will run concurrently so file changes update automatically.

:warning: CSS might not render on the very first load. :warning:

Simply open index.css, save the file to trigger an update, then refresh your browser.

Jekyll and Parcel run concurrently in dev builds so the CSS may not generate in time. This only happens once (when the file doesn't exist) and is not an issue in prod builds.

💻 Release

npm run build

Tailwind CSS is minified and Jekyll outputs the site to the _site folder.

Deploy statically (e.g. Netlify) with the following build settings:

• Command: npm run build
• Directory: _site

🤔 Troubleshoot

My styling disappears when deployed

• Jekyll markdown may generate elements that are being purged by Tailwind CSS. See these docs to whitelist elements or configure PurgeCSS further.
• Don't build up class names like "my" + "-class". Use full names like "my-class" instead.
• Don't whitelist the _site/ folder as this folder is not guaranteed to exist when deployed to a server.

Have another issue?

Contact me by posting an issue. I'll be happy to help 🙂