Problem with HTML reload with TailwindCSS and Gulp

Question

I'm setting up a project with TailwindCSS. I'm trying to set up my automation with Gulp, but I'm running into an issue with the HTML reloading. Everything seems to work perfectly fine when I run Gulp, it minifies and cleans my CSS, concats and minifies my JS, etc., but when I try saving a class from Tailwind in my HTML, my BrowserSync in my Gulp file doesn't reload. My Gulpfile is below.

var gulp = require('gulp')
    autoprefixer = require('gulp-autoprefixer')
    cleanCSS = require('gulp-clean-css')
    rename = require('gulp-rename')
    purgecss = require('gulp-purgecss')
    concat = require('gulp-concat')
    uglify = require('gulp-uglify')
    replace = require('gulp-replace')
    postcss = require('gulp-postcss')
    tailwindcss = require('tailwindcss')
    browserSync = require('browser-sync').create();


// CSS TASK
function css(){
  return gulp.src('./src/css/app.css')
    .pipe(postcss([
      require('tailwindcss'),
      require('autoprefixer'),
    ]))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename(function(path){
      path.extname = ".min.css"
    }))
    .pipe(
      purgecss({
        content: ['./*.html']
      })
    )
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream());
}


// JS TASK
function js(){
  return gulp.src('./src/js/**/*.js')
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(browserSync.stream());
}


// CACHEBUSTING TASK
const cbString = new Date().getTime();
function cacheBustTask(){
  return src(['index.html'])
    .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
    .pipe(dest('.')
  );
}


// BROWSERSYNC
function serve(){
  browserSync.init({
    server: {
      baseDir: './'
    }
  })
}


// WATCH
gulp.watch('./src/css/**/*.css', css);
gulp.watch('./src/js/**/*.js', js);
gulp.watch('./*.html').on('change', browserSync.reload);


// EXPORT IN ORDER
exports.default = gulp.parallel(css, js, serve);

Answer 1

I don't think you need ./ in your gulpfile, also I would suggest not having tailwindcss run as part of your css on file change, watch gulp task.

postcss([
    require('tailwindcss'),
    require('autoprefixer'),
])

I'd suggest placing it in it's own gulp task, that you run whenever you update tailwindcss.

Answer 2

I have had a similar problem and solved it by tweaking the watchers in my gulpfile.

In your case, the line that configures the HTML watcher looks like this:

gulp.watch('./*.html').on('change', browserSync.reload);

When you save a HTML file, this watcher refreshes your browser window. But it doesn't do anything else.

In order for Tailwind to work properly, you also need to trigger JIT compilation of the classes it detects in your HTML code. If you pass your CSS task as a callback to the watcher, the problem could resolve.

So, instead of the above, try:

gulp.watch('./*.html', css).on('change', browserSync.reload);