执行npm run dev/watch时出现Cannot find module 'tailwindcss/colors'错误

错误现象 #

执行npm run dev或npm run watch时触发如下编译错误：

ERROR in ./node_modules/@uppy/core/dist/style.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!./node_modules/@uppy/core/dist/style.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'tailwindcss/colors'

完整错误调用栈：

ERROR in ./node_modules/@uppy/core/dist/style.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!./node_modules/@uppy/core/dist/style.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'tailwindcss/colors'
Require stack:
- C:\Projects\myapp\vendor\wireui\wireui\tailwind.config.js
- C:\Projects\myapp\resources\views\themes\tailwind\tailwind.config.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\tailwindcss\lib\lib\setupTrackingContext.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\tailwindcss\lib\index.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\laravel-mix-tailwind\index.js
- C:\Projects\myapp\resources\views\themes\tailwind\webpack.mix.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\laravel-mix\setup\webpack.config.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack-cli\lib\bootstrap.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack-cli\bin\cli.js
- C:\Projects\myapp\resources\views\themes\tailwind\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Projects\myapp\vendor\wireui\wireui\tailwind.config.js:1:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

问题根源 #

从错误栈可以定位到：vendor/wireui/wireui/tailwind.config.js文件尝试引入tailwindcss/colors模块，但当前项目环境不满足该引用条件：

• 版本不兼容：Tailwind CSS v3.x才将tailwindcss/colors作为独立模块暴露，若项目安装的是v2.x及以下版本，该路径不存在。
• 依赖不匹配：WireUI版本与当前Tailwind CSS版本不兼容，或依赖安装不完整、缓存异常。

解决步骤 #

方法1：升级Tailwind CSS到兼容版本 #

如果项目允许升级，执行以下命令更新依赖：

# 卸载旧版依赖
npm uninstall tailwindcss postcss autoprefixer
# 安装最新稳定版
npm install -D tailwindcss postcss autoprefixer
# 重新生成Tailwind配置文件（按需执行）
npx tailwindcss init -p

更新完成后，确保项目的tailwind.config.js正确引入WireUI的配置逻辑，保持与WireUI官方文档一致。

方法2：适配低版本Tailwind CSS（不升级） #

若无法升级Tailwind，不要直接修改vendor目录下的WireUI源码，而是在项目自身的tailwind.config.js中调整颜色引用逻辑：

// 替换WireUI配置中的`require('tailwindcss/colors')`
const colors = require('tailwindcss/defaultTheme').colors

或者手动定义所需颜色值，彻底避免依赖tailwindcss/colors模块。

方法3：清理依赖缓存并重新安装 #

若为依赖安装不完整或缓存异常导致，执行以下步骤重置依赖：

# 删除本地依赖目录和锁文件
rm -rf node_modules package-lock.json
# 清理npm缓存
npm cache clean --force
# 重新安装所有依赖
npm install

完成后再次执行npm run dev或npm run watch验证问题是否解决。

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