Blendid + Tailwind (task config file)

task-config.js

const browserSync = require('browser-sync')
const cssnano = require('cssnano')
const easyImport = require('postcss-easy-import')
const gulpif = require('gulp-if')
const path = require('path')
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
const tailwindcss = require('tailwindcss')

module.exports = {
  html        : true,
  images      : true,
  fonts       : false,
  static      : true,
  svgSprite   : false,
  ghPages     : false,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ["./app.js"]
    }
  },

  browserSync: {
    server: {
      // should match `dest` in
      // path-config.json
      baseDir: 'public'
    }
  },

  production: {
    rev: true
  },

  stylesheets: {
    alternateTask: function (gulp, PATH_CONFIG, TASK_CONFIG) {

      // PostCSS task instead of Sass
      return function () {

        const paths = {
          src: path.resolve(process.env.PWD, PATH_CONFIG.src, PATH_CONFIG.stylesheets.src, '*.css'),
          dest: path.resolve(process.env.PWD, PATH_CONFIG.dest, PATH_CONFIG.stylesheets.dest)
        }

        const cssnanoConfig = TASK_CONFIG.stylesheets.cssnano || {}
        cssnanoConfig.autoprefixer = false // this should always be false, since we're autoprefixing separately

        const plugins = [
          easyImport(),
          tailwindcss('../../tailwind.config.js')
        ]

        if (global.production) {
          plugins.push(cssnano(cssnanoConfig))
        }

        return gulp.src(paths.src)
          .pipe(gulpif(!global.production, sourcemaps.init()))
          .pipe(postcss(plugins))
          .pipe(gulpif(!global.production, sourcemaps.write()))
          .pipe(gulp.dest(paths.dest))
          .pipe(browserSync.stream())

      }

    }
  }

}