Gulp4 - Tailwind and SCSS

gulpfile.js

// Load plugins
const gulp = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const postcss = require("gulp-postcss");
const cssnano = require("gulp-cssnano");
const concat = require("gulp-concat");
const autoprefixer = require("autoprefixer");

// CSS task
function styles() {
  var tailwindcss = require('tailwindcss');

  return gulp
    // start with getting the tailwind.css file
    .src("./src/css/tailwind.css")
    // use postcss to compile it.
    .pipe(postcss([
      tailwindcss('./tailwind.config.js')
    ]))

    // Add new source with your .scss
    .pipe(gulp.src("./src/css/**/*.scss"))
    // Compile to css
    .pipe(sass())
    // Concat both files into one styles.css file
    .pipe(concat("style.css"))

    // Run postcss again with just autoprefixer so it runs on both files
    .pipe(postcss([
      require('autoprefixer'),
    ]))
    // Minimise the css file
    .pipe(cssnano())

    // write css file to the filesystem
    .pipe(gulp.dest("./"))
}

// define tasks
const css = gulp.series(styles);

// export tasks
exports.css = css;