Update Gulpfile

_config.yml

@@ -4,10 +4,11 @@ description: A starter kit for using Tailwind with Jekyll
 exclude:
   - Gemfile
   - Gemfile.lock
-  - gulpfile.js
+  - gulpfile.babel.js
+  - LICENSE.md
   - node_modules
   - package.json
   - package-lock.json
   - README.md
   - src
-  - tailwind.js
+  - tailwind.config.js

_layouts/default.html

@@ -3,7 +3,9 @@
 
 {% include header.html %}
 
-<div class="bg-teal flex h-screen items-center justify-center text-white w-full">
+<div
+  class="bg-blue flex h-screen items-center justify-center text-white w-full"
+>
   {{ content }}
 </div>
 

gulpfile.babel.js

@@ -1,32 +1,23 @@
-import { dest, series, src, task, watch } from "gulp";
-
-import atimport from "postcss-import";
 import autoprefixer from "autoprefixer";
 import browserSync from "browser-sync";
+import { spawn } from "child_process";
 import cssnano from "cssnano";
+import { dest, series, src, task, watch } from "gulp";
 import gulpif from "gulp-if";
 import postcss from "gulp-postcss";
 import purgecss from "gulp-purgecss";
-import sourcemaps from "gulp-sourcemaps"
+import sourcemaps from "gulp-sourcemaps";
-import { spawn } from "child_process";
+import atimport from "postcss-import";
 import tailwindcss from "tailwindcss";
 
-/**
+const rawStylesheet = "src/style.css";
- * General settings
- */
-
-const mainStylesheet = "src/style.css"; /* Main stylesheet (pre-build) */
 const siteRoot = "_site";
-const tailwindConfig = "tailwind.config.js"; /* Tailwind config */
+const cssRoot = `${siteRoot}/assets/css/`;
-const cssDest = "_site/assets/css/";
+const tailwindConfig = "tailwind.config.js";
-let devBuild = false;
 
-/**
+const devBuild =
- * Utilities
+  (process.env.NODE_ENV || "development").trim().toLowerCase() ===
- */
+  "development";
-
-// Flag dev/production builds
-const setDevBuild = async () => { devBuild = true; }
 
 // Fix for Windows compatibility
 const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
@@ -39,45 +30,44 @@ class TailwindExtractor {
   }
 }
 
-/**
+task("buildJekyll", () => {
- * Jekyll tasks
- */
-
-task('buildJekyll', () => {
   browserSync.notify("Building Jekyll site...");
+
   const args = ["exec", jekyll, "build"];
 
-  if (devBuild) { args.push("--incremental"); }
+  if (devBuild) {
+    args.push("--incremental");
+  }
 
   return spawn("bundle", args, { stdio: "inherit" });
 });
 
-/**
+task("processStyles", done => {
- * CSS tasks
+  browserSync.notify("Compiling styles...");
- */
 
-task('processCss', (done) => {
+  return src(rawStylesheet)
-  browserSync.notify('Compiling tailwind');
-  return src(mainStylesheet)
     .pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
     .pipe(gulpif(devBuild, sourcemaps.init()))
-    .pipe(gulpif(!devBuild, new purgecss({
+    .pipe(
+      gulpif(
+        !devBuild,
+        new purgecss({
           content: ["_site/**/*.html"],
-      extractors: [{
+          extractors: [
+            {
               extractor: TailwindExtractor,
               extensions: ["html", "js"]
-      }]
+            }
-    })))
+          ]
-    .pipe(gulpif(!devBuild, postcss([autoprefixer(), cssnano()])))
-    .pipe(gulpif(devBuild, sourcemaps.write('')))
-    .pipe(dest(cssDest));
         })
+      )
+    )
+    .pipe(gulpif(!devBuild, postcss([autoprefixer(), cssnano()])))
+    .pipe(gulpif(devBuild, sourcemaps.write("")))
+    .pipe(dest(cssRoot));
+});
 
-/**
+task("startServer", () => {
- * Browsersync tasks
- */
-
-task('startServer', () => {
   browserSync.init({
     files: [siteRoot + "/**"],
     open: "local",
@@ -89,24 +79,20 @@ task('startServer', () => {
 
   watch(
     [
-      mainStylesheet,
+      rawStylesheet,
       tailwindConfig,
       "**/*.html",
       "**/*.md",
       "**/*.yml",
       "!_site/**/*",
       "!node_modules"
-    ], { interval: 500 },
+    ],
+    { interval: 500 },
     buildSite
   );
 });
 
-/**
+const buildSite = series("buildJekyll", "processStyles");
- * Exports
- */
 
-const buildSite = series('buildJekyll', 'processCss');
+exports.serve = series(buildSite, "startServer");
-
-exports.serve = series(setDevBuild, buildSite, 'startServer');
-exports.build_dev = series(setDevBuild, buildSite);
 exports.default = series(buildSite);

package.json

@@ -1,13 +1,13 @@
 {
   "name": "tailwind-jekyll",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "A starter kit for using Tailwind with Jekyll",
   "main": "gulpfile.js",
   "devDependencies": {
-    "autoprefixer": "^9.3.1",
+    "autoprefixer": "^9.4.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-register": "^6.26.0",
-    "browser-sync": "^2.23.7",
+    "browser-sync": "^2.26.3",
     "cssnano": "^4.1.7",
     "gulp": "^4.0.0",
     "gulp-if": "^2.0.2",
@@ -15,11 +15,11 @@
     "gulp-purgecss": "^1.1.1",
     "gulp-sourcemaps": "^2.6.4",
     "postcss-import": "^11.1.0",
-    "tailwindcss": "^0.7.2"
+    "tailwindcss": "^0.7.3"
   },
   "scripts": {
-    "build": "gulp",
+    "build": "NODE_ENV=production gulp",
-    "build:dev": "gulp build_dev",
+    "build:dev": "gulp",
     "start": "gulp serve"
   },
   "author": "Taylor Bryant",

src/style.css

@@ -60,4 +60,3 @@
  * @import "utilities/background-patterns";
  * @import "utilities/skew-transforms";
  */
- 

tailwind.config.js

@@ -24,7 +24,7 @@ View the full documentation at https://tailwindcss.com.
 |
 */
 
-// let defaultConfig = require('tailwindcss/defaultConfig')()
+let defaultConfig = require('tailwindcss/defaultConfig')()
 
 
 /*
@@ -189,6 +189,7 @@ module.exports = {
   | provided by the platform.
   |
   | Class name: .font-{name}
+  | CSS property: font-family
   |
   */
 
@@ -226,7 +227,7 @@ module.exports = {
       'Liberation Mono',
       'Courier New',
       'monospace',
-    ]
+    ],
   },
 
 
@@ -246,6 +247,7 @@ module.exports = {
   | prefer, be it rems, ems, pixels or other.
   |
   | Class name: .text-{size}
+  | CSS property: font-size
   |
   */
 
@@ -273,6 +275,7 @@ module.exports = {
   | all of these, so we recommend removing those you don't need.
   |
   | Class name: .font-{weight}
+  | CSS property: font-weight
   |
   */
 
@@ -298,6 +301,7 @@ module.exports = {
   | them in Tailwind, leadings.
   |
   | Class name: .leading-{size}
+  | CSS property: line-height
   |
   */
 
@@ -318,6 +322,7 @@ module.exports = {
   | them in Tailwind, tracking.
   |
   | Class name: .tracking-{size}
+  | CSS property: letter-spacing
   |
   */
 
@@ -338,6 +343,7 @@ module.exports = {
   | independently if that makes sense for your project.
   |
   | Class name: .text-{color}
+  | CSS property: color
   |
   */
 
@@ -354,6 +360,7 @@ module.exports = {
   | these independently if that makes sense for your project.
   |
   | Class name: .bg-{color}
+  | CSS property: background-color
   |
   */
 
@@ -370,6 +377,7 @@ module.exports = {
   | that are specific to your project here as well.
   |
   | Class name: .bg-{size}
+  | CSS property: background-size
   |
   */
 
@@ -390,6 +398,7 @@ module.exports = {
   | width that will be used when you do not specify a border width.
   |
   | Class name: .border{-side?}{-width?}
+  | CSS property: border-width
   |
   */
 
@@ -416,6 +425,7 @@ module.exports = {
   | specify a border color.
   |
   | Class name: .border-{color}
+  | CSS property: border-color
   |
   */
 
@@ -435,6 +445,7 @@ module.exports = {
   | a good idea to put it first so other values are able to override it.
   |
   | Class name: .rounded{-side?}{-size?}
+  | CSS property: border-radius
   |
   */
 
@@ -464,6 +475,7 @@ module.exports = {
   | awesome classes like .w-2/3.
   |
   | Class name: .w-{size}
+  | CSS property: width
   |
   */
 
@@ -496,7 +508,7 @@ module.exports = {
     '1/6': '16.66667%',
     '5/6': '83.33333%',
     'full': '100%',
-    'screen': '100vw'
+    'screen': '100vw',
   },
 
 
@@ -512,6 +524,7 @@ module.exports = {
   | needed.
   |
   | Class name: .h-{size}
+  | CSS property: height
   |
   */
 
@@ -533,7 +546,7 @@ module.exports = {
     '48': '12rem',
     '64': '16rem',
     'full': '100%',
-    'screen': '100vh'
+    'screen': '100vh',
   },
 
 
@@ -548,6 +561,7 @@ module.exports = {
   | these values as needed.
   |
   | Class name: .min-w-{size}
+  | CSS property: min-width
   |
   */
 
@@ -568,13 +582,14 @@ module.exports = {
   | values as needed.
   |
   | Class name: .min-h-{size}
+  | CSS property: min-height
   |
   */
 
   minHeight: {
     '0': '0',
     'full': '100%',
-    'screen': '100vh'
+    'screen': '100vh',
   },
 
 
@@ -590,6 +605,7 @@ module.exports = {
   | modify these values as needed.
   |
   | Class name: .max-w-{size}
+  | CSS property: max-width
   |
   */
 
@@ -618,6 +634,7 @@ module.exports = {
   | these values as needed.
   |
   | Class name: .max-h-{size}
+  | CSS property: max-height
   |
   */
 
@@ -639,6 +656,7 @@ module.exports = {
   | values as needed.
   |
   | Class name: .p{side?}-{size}
+  | CSS property: padding
   |
   */
 
@@ -673,6 +691,7 @@ module.exports = {
   | values as needed.
   |
   | Class name: .m{side?}-{size}
+  | CSS property: margin
   |
   */
 
@@ -708,6 +727,7 @@ module.exports = {
   | values as needed.
   |
   | Class name: .-m{side?}-{size}
+  | CSS property: margin
   |
   */
 
@@ -743,6 +763,7 @@ module.exports = {
   | suffixed `.shadow` utility.
   |
   | Class name: .shadow-{size?}
+  | CSS property: box-shadow
   |
   */
 
@@ -766,6 +787,7 @@ module.exports = {
   | values as needed.
   |
   | Class name: .z-{index}
+  | CSS property: z-index
   |
   */
 
@@ -790,6 +812,7 @@ module.exports = {
   | values as needed.
   |
   | Class name: .opacity-{name}
+  | CSS property: opacity
   |
   */
 
@@ -813,6 +836,7 @@ module.exports = {
   | generated CSS file size down.
   |
   | Class name: .fill-{name}
+  | CSS property: fill
   |
   */
 
@@ -832,6 +856,7 @@ module.exports = {
   | keep the generated CSS file size down.
   |
   | Class name: .stroke-{name}
+  | CSS property: stroke
   |
   */
 
@@ -852,6 +877,7 @@ module.exports = {
   |   - responsive
   |   - hover
   |   - focus
+  |   - focus-within
   |   - active
   |   - group-hover
   |
@@ -886,6 +912,8 @@ module.exports = {
     minHeight: ['responsive'],
     minWidth: ['responsive'],
     negativeMargin: ['responsive'],
+    objectFit: false,
+    objectPosition: false,
     opacity: ['responsive'],
     outline: ['focus'],
     overflow: ['responsive'],