diff --git a/examples/jekyll/.gitignore b/examples/jekyll/.gitignore
index 192adf2d..36090b92 100644
--- a/examples/jekyll/.gitignore
+++ b/examples/jekyll/.gitignore
@@ -1,8 +1,13 @@
-_site
-.DS_STORE
-.sass-cache
+.sass-cache/
.jekyll-metadata
-node_modules
+
+vendor/
+.bundle
+
+node_modules/
yarn.lock
Gemfile.lock
-_includes/tailwind.js
+
+_site/
+
+.DS_STORE
diff --git a/examples/jekyll/Gemfile b/examples/jekyll/Gemfile
index 60b6d726..174542b2 100644
--- a/examples/jekyll/Gemfile
+++ b/examples/jekyll/Gemfile
@@ -1,8 +1,11 @@
source "https://rubygems.org"
-gem "jekyll", "~> 3.8.5"
+gem "jekyll", "~> 3.9"
+gem "kramdown-parser-gfm", "~> 1.1.0"
group :jekyll_plugins do
+ gem "jekyll-seo-tag"
+ gem "jekyll-feed"
gem "jekyll-postcss"
gem "jekyll-purgecss"
end
@@ -12,4 +15,3 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.0" if Gem.win_platform?
-
diff --git a/examples/jekyll/Makefile b/examples/jekyll/Makefile
new file mode 100644
index 00000000..a90a1eaa
--- /dev/null
+++ b/examples/jekyll/Makefile
@@ -0,0 +1,15 @@
+default: install
+
+h help:
+ @egrep '^\S|^$$' Makefile
+
+install:
+ bundle config set --local path vendor/bundle
+ bundle install
+ yarn install
+
+s serve:
+ bundle exec jekyll serve --trace --livereload
+
+build:
+ JEKYLL_ENV=production bundle exec jekyll build --trace
diff --git a/examples/jekyll/README.md b/examples/jekyll/README.md
index 078ff469..cc93a788 100644
--- a/examples/jekyll/README.md
+++ b/examples/jekyll/README.md
@@ -2,33 +2,52 @@
## About
-This project uses [jekyll-postcss](https://github.com/mhanberg/jekyll-postcss) to manage compiling your Tailwind. You can use any [PostCSS](https://postcss.org) plugin by installing it with `yarn` or `npm` and adding it to your `postcss.config.js`.
+This project uses [jekyll-postcss](https://github.com/mhanberg/jekyll-postcss) to compile Tailwind CSS for you.
-[jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) is used to integrate Purgecss (only in production).
+You can use any [PostCSS](https://postcss.org) plugin by installing it with `yarn` or `npm` and adding it to your [postcss.config.js](postcss.config.js).
-## Usage
-
-### Locally
+The [jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) plugin is used to integrate Purgecss (only in production).
-`bundle exec jekyll serve`
-### Production
+## Installation
-`JEKYLL_ENV=production bundle exec jekyll build`
+### Requirements
-## Install
+- Ruby
+- Yarn and Node.js
-Once you configure the following files, run:
+### Install project dependencies
-```shell
+```sh
+$ bundle config set --local path vendor/bundle
$ bundle install
$ yarn install
+```
-$ yarn run tailwind init _includes/tailwind.config.js
+
+## Usage
+
+### Start dev server
+
+```sh
+$ bundle exec jekyll serve --trace --livereload
+```
+
+### Build for production
+
+```sh
+$ JEKYLL_ENV=production bundle exec jekyll build --trace
```
+
+## Configuration
+
+In a new project, setup your config files as below.
+
### Gemfile
+Add these gems to your [Gemfile](Gemfile). By using the plugins group as below, they will be enabled without being added to `plugins` in your config.
+
```ruby
group :jekyll_plugins do
gem "jekyll-postcss"
@@ -36,14 +55,6 @@ group :jekyll_plugins do
end
```
-### _config.yml
-
-```yaml
-plugins:
- - jekyll-postcss
- - jekyll-purgecss
-```
-
### package.json
Update the version numbers to whatever is currently latest.
@@ -82,4 +93,8 @@ module.exports = {
};
```
+### tailwind.config.js
+```sh
+$ yarn run tailwind init _includes/tailwind.config.js
+```
diff --git a/examples/jekyll/_config.yml b/examples/jekyll/_config.yml
index f6efdc48..44385afd 100644
--- a/examples/jekyll/_config.yml
+++ b/examples/jekyll/_config.yml
@@ -1,31 +1,23 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+### Site metadata ###
-# Build settings
-markdown: kramdown
-plugins:
- - jekyll-postcss
- - jekyll-purgecss
+title: Jekyll Tailwind Demo
+description:
+
+### Build settings ###
+
+url: ""
+baseurl: "/jekyll-with-tailwind"
-# Exclude from processing.
-# The following items will not be processed, by default. Create a custom list
-# to override the default setting.
exclude:
+ - bin/
+ - vendor/
- Gemfile
- Gemfile.lock
- - node_modules
+ - node_modules/
+ - package*.json
- yarn.lock
- - package-lock.json
- - README.md
- postcss.config.js
- purgecss.config.js
+ - README.md
+ - Makefile
- netlify.toml
- - bin
- - .gitignore
diff --git a/examples/jekyll/_includes/tailwind.config.js b/examples/jekyll/_includes/tailwind.config.js
new file mode 100644
index 00000000..c0826ce5
--- /dev/null
+++ b/examples/jekyll/_includes/tailwind.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ future: {
+ // removeDeprecatedGapUtilities: true,
+ // purgeLayersByDefault: true,
+ },
+ purge: [],
+ theme: {
+ extend: {},
+ },
+ variants: {},
+ plugins: [],
+}
diff --git a/examples/jekyll/_layouts/default.html b/examples/jekyll/_layouts/default.html
index 2fa932a2..4b582abd 100644
--- a/examples/jekyll/_layouts/default.html
+++ b/examples/jekyll/_layouts/default.html
@@ -3,17 +3,18 @@
{% feed_meta %}
{% seo %}
-
+
-
-
- {% if jekyll.environment == 'production' %}
- {% include analytics.html %}
- {% endif %}
-
-
+
+
+
+ {% if jekyll.environment == 'production' %}
+ {% include analytics.html %}
+ {% endif %}
+
+