升级Tailwind CSS从0.7.0到1.x时遭遇postcss-loader编译错误求助

问题描述 #

升级Tailwind CSS从0.7.0版本至1.9.6版本后，Vue项目构建时出现如下错误：

ERROR  Failed to compile with 1 errors                                                                                                                                                      19:10:26
This dependency was not found:
* -!../../../node_modules/css-loader/index.js??ref--7-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-3-2!tailwindcss/preflight.css in ./node_modules/css-loader??ref--7-oneOf-3-1!./node_modules/postcss-loader/src??ref--7-oneOf-3-2!./src/assets/css/tailwind.postcss
To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js??ref--7-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-3-2!tailwindcss/preflight.css

环境信息 #

Technology stack used: Vue.js & tailwind
node version: 14.8.1
npm version: 8.3.0
nodejs version: 8.10.0

解决方案 #

该报错源于Tailwind 1.x版本对基础样式的引入逻辑发生了变更，旧版本单独引入preflight.css的写法导致Webpack解析异常，按以下步骤修复：

• 更新样式文件引入方式：在src/assets/css/tailwind.postcss中，移除旧的@import 'tailwindcss/preflight.css';语句，替换为Tailwind 1.x的官方指令：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  1.x版本中preflight基础样式已整合到@tailwind base指令内，无需单独引入。

• 清理并重装依赖：执行命令清除旧依赖缓存，避免版本冲突：

  rm -rf node_modules package-lock.json
  npm install
  

• 重启开发服务：完全关闭当前Vue开发服务器后重新启动，确保Webpack重新加载所有配置与文件。

内容的提问来源于stack exchange，提问作者Tarun Jain