Gulp无法识别新增Tailwind类，修改后需重启服务器问题排查

配置Gulp、Sass与TailwindCSS环境时，首次运行Gulp能正常应用Tailwind样式，但新增Tailwind类后，即使服务器处于运行状态且类已编译到dist目录的CSS文件中，页面仍看不到样式变化，必须重启Gulp才生效。以下是相关配置文件：

Gulp配置文件 #

const { series, src, dest, watch } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const tailwindcss = require('tailwindcss');
let imagemin;
const imagewebp = require('gulp-webp');
const browserSync = require('browser-sync').create();

// css Task
function scssTask() {
  return src('assets/src/scss/app.scss', { sourcemaps: true })
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(postcss([cssnano(), tailwindcss()]))
    .pipe(dest('dist', { sourcemaps: '.' }))
    .pipe(browserSync.stream());
}

// Js Task
function jsTask() {
  return src('assets/src/js/*.js', { sourcemaps: true })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(terser())
    .pipe(dest('dist', { sourcemaps: '.' }));
}

const optimizeimg = series(
    async () => {
        imagemin = await import('gulp-imagemin');
    },
    () => src('assets/src/images/**/*')
        .pipe(
            imagemin.default(
                [
                    imagemin.mozjpeg({ quality: 80, progressive: true }),
                    imagemin.optipng({ optimizationLevel: 2})
                ]))
        .pipe(dest('./dist/images'))
);

//optimize and move images
function webpImage() {
  return src('dist/images/*.{jpg,png}') // change to your source directory
    .pipe(imagewebp())
    .pipe(dest('dist/images')) // change to your final/public directory
};

function browserSyncServer(cb) {
  browserSync.init({
    server: {
      baseDir: './',
    },
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
  });
  cb();

}

function browserSyncReload(cb) {
  browserSync.reload();
  cb();
}

function watchTasks(cb) {
  watch('*.html', browserSyncReload);
  watch(
    ['assets/src/scss/**/*.scss', 'assets/src/scss/*.scss', 'assets/src/images/*.{png,jpg}'],
    series(scssTask,optimizeimg,webpImage, browserSyncReload)
  );
  cb();
}
exports.default = series(scssTask, optimizeimg,webpImage,browserSyncServer, watchTasks);

exports.build = series(scssTask,optimizeimg, webpImage);

Tailwind配置文件 #

module.exports = {
  content: ['./assets/src/**/*.html',
    './assets/src/**/*.js',
    './assets/src/**/*.scss',
    './index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

核心问题 #

1. PostCSS插件顺序错误：当前postcss先执行cssnano()压缩，再执行tailwindcss()生成样式，会导致Tailwind的新增样式被异常处理，且不符合“先生成后压缩”的流程。
2. 监听范围不全：Gulp仅监听了SCSS和图片文件，未覆盖Tailwindcontent配置中的HTML、JS文件。新增Tailwind类时，Tailwind无法感知文件变更，不会重新生成对应CSS。

修复步骤 #

1. 调整PostCSS插件顺序 #

修改scssTask中的postcss调用，将tailwindcss()放在cssnano()之前，确保先生成完整样式再做压缩优化：

// 修改前
.pipe(postcss([cssnano(), tailwindcss()]))

// 修改后
.pipe(postcss([tailwindcss(), cssnano()]))

2. 扩展Gulp监听范围 #

更新watchTasks，将HTML、JS文件加入监听列表，确保Tailwind能感知到类的新增并重新编译CSS：

function watchTasks(cb) {
  // HTML变更直接刷新页面
  watch('*.html', browserSyncReload);
  // 监听HTML、JS、SCSS文件变更，触发CSS编译和页面刷新
  watch(
    ['*.html', 'assets/src/js/**/*.js', 'assets/src/scss/**/*.scss'],
    series(scssTask, browserSyncReload)
  );
  // 仅图片变更时触发图片优化任务
  watch('assets/src/images/*.{png,jpg}', series(optimizeimg, webpImage, browserSyncReload));
  cb();
}

3. 验证效果 #

重启Gulp后，在HTML或JS文件中新增Tailwind类，Gulp会自动触发CSS编译，BrowserSync实时刷新页面，新样式即可立即生效。

内容的提问来源于stack exchange，提问作者ibtissam elhammoumy