使用Laravel Mix与Tailwind编译SASS时遇到的问题

看起来你的配置里有几个可能导致编译失败的问题，我来帮你一步步排查修复：

1. 移除重复的Tailwind CSS配置 #

你在.sass()方法中额外传入了Tailwind处理器，同时又在.options()的postCss数组里配置了一次，这会导致重复处理引发冲突。修改你的webpack.mix.js：

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/dist/js')
  // 移除sass方法里多余的tailwind处理器参数
  .sass('resources/js/assets/sass/app.scss', 'public/dist/css')
  .options({
    processCssUrls: false,
    postCss: [
      // 确保正确指向tailwind配置文件
      tailwindcss('./tailwind.config.js'),
      require('autoprefixer') // 补充autoprefixer，Tailwind依赖它完成浏览器兼容处理
    ]
  })
  .autoload({
    'cash-dom': ['$', 'cash']
  })
  .copyDirectory('resources/js/assets/images', 'public/dist/images')
  // 修正summernote字体复制逻辑：单个文件用copy，目录用copyDirectory
  .copyDirectory('node_modules/summernote/dist/font', 'public/dist/fonts/summernote')
  .browserSync({
    proxy: 'evpiu.test',
    files: ['resources/**/*.*']
  }).webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
  mix.version();
}

2. 确认SASS文件的Tailwind指令顺序 #

打开resources/js/assets/sass/app.scss，确保最顶部包含Tailwind的核心指令，顺序不能颠倒：

// 必须放在所有自定义样式之前
@tailwind base;
@tailwind components;
@tailwind utilities;

// 你的自定义SASS代码写在这里
// ...

3. 检查依赖版本兼容性 #

Laravel Mix、Tailwind CSS和PostCSS的版本不匹配是常见的编译失败原因。打开你的package.json，确保版本组合兼容（以下是一套稳定的参考组合）：

{
  "devDependencies": {
    "laravel-mix": "^6.0.49",
    "tailwindcss": "^3.3.0",
    "postcss": "^8.4.21",
    "autoprefixer": "^10.4.13",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2"
  }
}

如果版本不匹配，执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install

4. 清理缓存并重新编译 #

执行清理命令清除Mix的缓存，再尝试重新编译：

npx mix clean
npm run dev

如果还是出现错误，把终端输出的具体错误信息贴出来，这样能更精准地定位问题~

内容的提问来源于stack exchange，提问作者Daniel Hincapié