Tailwind SCSS编译后@apply生成重复类问题求助

针对你用Vite/Gulp都遇到的@apply后工具类被编译为独立重复类的问题，试试以下几个排查和解决步骤：

• 检查tailwind.config.js的content配置
  Tailwind 3的JIT模式需要识别所有用到样式的文件，若仅配置了HTML/JS文件，它无法检测到CSS中通过@apply引用的工具类，会误判这些工具类被直接使用，从而单独输出。把自定义CSS文件加入content范围：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{html,js,css}", // 新增css后缀，覆盖自定义样式文件路径
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 确认自定义CSS的编写顺序
  自定义类必须写在@tailwind base;、@tailwind components;、@tailwind utilities;这三个指令之后，否则Tailwind无法正确识别@apply的依赖关系，导致重复编译：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  /* 自定义类写在指令之后 */
  .custom-btn {
    @apply px-6 py-3 bg-green-600 text-white rounded-lg;
  }
  

• 清理构建缓存
  Vite或Gulp的缓存可能保留旧编译结果，导致重复类残留：

  • Vite：删除项目根目录下的node_modules/.vite文件夹，重新执行npm run dev/build
  • Gulp：手动清空输出目录（如dist），再重新运行构建任务

• 验证PostCSS配置
  确保postcss.config.js正确引入Tailwind，无版本混用问题：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

内容的提问来源于stack exchange，提问作者Houssem BEN OTHMEN