Jekyll & Tailwind CSS Boilerplate

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

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

Install Ruby
Install NPM
Install Bundler $ gem install bundler
Run $ npm run setup to setup the project.

How to Use

🍕 Development

$ npm run dev
$ npm run dev-l (Optional: LiveReload Chrome Extension)

Generates all Tailwind CSS classes so you can develop without regenerating them.
Runs the Jekyll watcher which regenerates the site when files are modified.

Note that the generated styles.css file will show changes in git. Ensure to run the release command before committing so that you only commit necessary CSS changes. If you depend on a build process on your server (e.g. Netlify), you do NOT need to commit this.

💻 Release

$ npm run rel

Generates the minimum Tailwind CSS necessary to display your site in order to keep the file size tiny.
Minifies the CSS to reduce the file size even more.

To deploy on Netlify for example, use the following build settings: