gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const postcss = require('gulp-postcss');
const tailwindcss = require('tailwindcss');

// compile scss into css
function style() {
    // 1. scss source
    return gulp.src('./scss/**/*.scss')
    // 2 pass through sass compile
    .pipe(sass().on('error', sass.logError))
    // 2a. pass through tailwindcss via postcss
    .pipe(postcss([
        require('tailwindcss')
    ]))
    // 3. output to css
    .pipe(gulp.dest('./css'))
    // 4. stream changes to all browser
    .pipe(browserSync.stream());
}

function watch() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
    gulp.watch('./scss/**/*.scss', style);
    gulp.watch('./*.html').on('change', browserSync.reload);
    gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;