Laravel集成TailwindCSS运行npm run dev报PostCSS插件错误怎么解决？

问题根源 #

你在webpack.mix.js的PostCSS插件列表里错误引入了PostCSS本身：PostCSS是CSS处理工具，不是可调用的PostCSS插件，加入插件数组后就会触发} is not a PostCSS plugin的报错。

修复步骤 #

• 第一步：修正webpack.mix.js配置，删除多余的require('postcss')行，修改后配置如下：

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

• 第二步：配置未使用CSS清理规则
  Tailwind默认仅在生产环境构建时自动开启无用CSS清理，要开启清理功能可以按以下操作：
  • 若要生产环境自动清理，直接运行npm run prod构建即可
  • 若要开发环境也开启清理，可在Tailwind配置文件的purge段添加enabled: true配置，修改后如下（注意Tailwind v3版本已将purge配置项改名为content，功能逻辑完全一致）：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: {
        enabled: true, // 强制开启清理，不区分开发/生产环境
        content: [
            './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
            './storage/framework/views/*.php',
            './resources/**/*.blade.php',
            './resources/**/*.js',
            './resources/**/*.vue',
        ]
    },
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },
    plugins: [require('@tailwindcss/forms')],
};

• 第三步：修复spawn ENAMETOOLONG报错
  这个报错是Windows系统下项目路径过长导致的，可选解决方案：
  • 将项目迁移到路径更短的目录，例如直接放在C:\projects目录下，避免放在OneDrive多层子目录中
  • 开启Windows长路径支持：按下Win+R输入regedit打开注册表，定位到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem，将LongPathsEnabled的值设置为1，重启电脑后生效
  • 升级Node.js到16.x及以上版本

验证效果 #

重新运行npm run dev或npm run prod，即可正常构建且自动清理无用CSS，打包后的CSS体积会大幅缩减。

内容的提问来源于stack exchange，提问作者Trevor DeSibyl