From 32fcf3d4631ba880d847c4e0e4206e9c5b4ae9a4 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:08:54 +0200 Subject: [PATCH 01/11] docs: Update README.md for Jekyll --- examples/jekyll/README.md | 53 +++++++++++++++++++++++++-------------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/examples/jekyll/README.md b/examples/jekyll/README.md index 078ff469..a6ffb754 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 +$ bundle config set --local path vendor/bundle $ bundle install $ yarn install +``` -$ yarn run tailwind init _includes/tailwind.config.js + +## Usage + +### Start dev serve + +```sh +$ bundle exec jekyll serve --trace +``` + +### Build for production + +```sh +$ JEKYLL_ENV=production bundle exec jekyll build ``` + +## Configuration + +In a few 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 +``` From b0826a69bb473992e61f424d7444be0c463b62ef Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:10:55 +0200 Subject: [PATCH 02/11] chore: Update config --- examples/jekyll/_config.yml | 36 ++++++++++++++---------------------- 1 file changed, 14 insertions(+), 22 deletions(-) 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 From ee119a64e3f49e044f53f271a4a4aa2dc0abef91 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:12:24 +0200 Subject: [PATCH 03/11] chore: Add vendor and reorder --- examples/jekyll/.gitignore | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) 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 From 0a7ca7593a5d533934de58d0d94763dddcc543e5 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:12:37 +0200 Subject: [PATCH 04/11] build: Update to latest Jekyll 3 --- examples/jekyll/Gemfile | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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? - From 51eeb722b9d3260b4c41fe3bcbe2f45721db80cd Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:12:58 +0200 Subject: [PATCH 05/11] feat: Update page --- examples/jekyll/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/jekyll/index.html b/examples/jekyll/index.html index cd992f1a..4280c98b 100644 --- a/examples/jekyll/index.html +++ b/examples/jekyll/index.html @@ -2,7 +2,7 @@ layout: default --- -

Welcome to jekyll-tailwind-starter!

+

Welcome to jekyll-tailwind-starter!

{% for post in site.posts %} {{ post.title }} From f54aa5d18f49d72be75e2b5b5f0e99373152dacc Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:14:40 +0200 Subject: [PATCH 06/11] docs: Update Jekyll README.md --- examples/jekyll/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/jekyll/README.md b/examples/jekyll/README.md index a6ffb754..0be6f66a 100644 --- a/examples/jekyll/README.md +++ b/examples/jekyll/README.md @@ -18,7 +18,7 @@ The [jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) plugin is use ### Install project dependencies -```shell +```sh $ bundle config set --local path vendor/bundle $ bundle install $ yarn install @@ -30,7 +30,7 @@ $ yarn install ### Start dev serve ```sh -$ bundle exec jekyll serve --trace +$ bundle exec jekyll serve --trace --livereload ``` ### Build for production From 91a6e303909fc79b981c1a154f16e67b81d4477a Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:14:45 +0200 Subject: [PATCH 07/11] feat: Create Makefile --- examples/jekyll/Makefile | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 examples/jekyll/Makefile 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 From b5568428bbb0c547e10f58d8533955e71de6dab6 Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:14:50 +0200 Subject: [PATCH 08/11] feat: Update page --- examples/jekyll/_layouts/default.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) 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 %} - + - -
- {{ content }} -
- {% if jekyll.environment == 'production' %} - {% include analytics.html %} - {% endif %} - - + +
+ {{ content }} +
+ + {% if jekyll.environment == 'production' %} + {% include analytics.html %} + {% endif %} + + From 5dc38373c3b32fbf363cf96d7cb0a6a9daf7fabc Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:14:56 +0200 Subject: [PATCH 09/11] feat: Create config --- examples/jekyll/_includes/tailwind.config.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 examples/jekyll/_includes/tailwind.config.js 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: [], +} From a41abda942664689365f2035515b2c6bccda373b Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:15:04 +0200 Subject: [PATCH 10/11] chore: Rename file --- examples/jekyll/css/{site.css => styles.css} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename examples/jekyll/css/{site.css => styles.css} (85%) diff --git a/examples/jekyll/css/site.css b/examples/jekyll/css/styles.css similarity index 85% rename from examples/jekyll/css/site.css rename to examples/jekyll/css/styles.css index 32ea7ebb..be87dfef 100644 --- a/examples/jekyll/css/site.css +++ b/examples/jekyll/css/styles.css @@ -9,4 +9,4 @@ /* Write your styles above this line. */ -@tailwind utilities; +@import "tailwindcss/utilities"; From e2a6ec0322d5c378ebaae72d90be7e3c1e9e45fb Mon Sep 17 00:00:00 2001 From: Michael Currin <18750745+MichaelCurrin@users.noreply.github.com> Date: Sat, 28 Nov 2020 13:31:34 +0200 Subject: [PATCH 11/11] docs: Update README.md --- examples/jekyll/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/jekyll/README.md b/examples/jekyll/README.md index 0be6f66a..cc93a788 100644 --- a/examples/jekyll/README.md +++ b/examples/jekyll/README.md @@ -27,7 +27,7 @@ $ yarn install ## Usage -### Start dev serve +### Start dev server ```sh $ bundle exec jekyll serve --trace --livereload @@ -36,13 +36,13 @@ $ bundle exec jekyll serve --trace --livereload ### Build for production ```sh -$ JEKYLL_ENV=production bundle exec jekyll build +$ JEKYLL_ENV=production bundle exec jekyll build --trace ``` ## Configuration -In a few project, setup your config files as below. +In a new project, setup your config files as below. ### Gemfile