Tailwind CSS JIT模式与Webpack集成时新增类不生效，关闭JIT热更新缓慢

AI 小北

2026-10-27

问题根因

两个配置偏差共同触发了JIT模式下新增类无法生效的异常：

purge扫描路径配置完全错位：Tailwind JIT的核心逻辑是实时扫描指定路径下的源码文件，识别页面中用到的类名，按需生成对应样式。你当前配置的扫描目标是构建输出目录dist下的文件，会引发两个连锁问题：

Webpack输出配置开启了clean: true，devServer每次启动、热更新前都会清空dist目录，JIT在构建流程中扫描purge路径时，拿到的是空目录或上一次构建的过期文件内容，根本无法识别你在源码中新增的类名
输出的JS文件名带[fullhash:8]动态哈希，每次构建生成的文件名都不固定，JIT内置的文件监听器无法跟踪文件变化，自然不会响应你在源码里新增类的操作

PostCSS配置加载了冗余的测试版JIT插件：Tailwind CSS 2.1.1版本已经原生内置了JIT编译能力，不需要额外引入独立的测试版@tailwindcss/jit插件。这个独立插件和Webpack的文件监听、HMR流程存在已知兼容问题，会直接中断样式更新流程。

你之前关闭JIT模式后功能完全正常，本质是非JIT模式下Tailwind会生成全量样式，不受purge扫描路径偏差的影响，只是全量样式体积过大，才会出现热更新慢的问题。

具体修复步骤

调整Tailwind配置的purge扫描路径，替换为源码目录下的所有可能出现类名的文件类型，保留原生JIT模式开关：

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  // 替换原有的dist扫描规则，只扫描src目录下的源码文件
  purge: [
    './src/**/*.html',
    './src/**/*.ts',
    './src/**/*.js',
    './src/**/*.scss'
  ],
  darkMode: false,
  // 以下原有配置保持不变
  theme: {
    screens: {
      print: { raw: 'print' },
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    extend: {
      fontFamily: {},
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        white: colors.white,
        gray: colors.trueGray,
        indigo: colors.indigo,
        red: colors.rose,
        yellow: colors.amber,
      },
      fontSize: {},
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

修正PostCSS配置，移除独立的测试版JIT插件，换回原生的tailwindcss插件即可触发内置JIT能力：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    // 替换原有的@tailwindcss/jit为原生tailwindcss插件
    require('tailwindcss')
  ],
};

优化Webpack Dev Server的监听规则，避免JIT扫描被打断：
在原有devServer配置基础上补充文件监听配置，确保源码变更能被JIT正确捕获：

// webpack.config.js 中devServer部分的最终配置
devServer: {
  contentBase: path.resolve(__dirname, 'dist'),
  watchContentBase: true,
  writeToDisk: true,
  hot: true,
  // 补充：忽略node_modules目录的监听，确保源码文件变更能被及时捕获
  watchOptions: {
    ignored: /node_modules/,
  },
},

修复后效果

JIT模式正常启用，热更新速度回到毫秒级
源码中新增的任意Tailwind类会在保存后立即被扫描识别，生成对应样式并触发热更新，不需要手动重启devServer
彻底解决“原有类正常生效、新增类失效”的异常，同时保留JIT模式的开发效率优势

内容的提问来源于stack exchange，提问作者Jean-Baptiste THERY