Next.js项目中@tailwind utilities引发无法消除的模块找不到错误

1. 排查组件动态资源引用 #

错误提示的./${props.imgInactive}是JSX动态变量，说明项目中存在组件用内联样式、css-in-js或背景图引用了动态图片路径，编译时错误被错误映射到globals.css空行（属于源映射bug）：

• 全局搜索imgInactive定位到对应组件
• 修正动态图片路径写法：
  • 本地图片用next/image时，必须静态导入或使用public目录绝对路径（如/images/${props.imgInactive}）
  • css-in-js中动态背景图需确保url()内路径正确，避免把JS变量直接写进CSS字符串

2. 校验Tailwind配置与CSS文件 #

• 检查tailwind.config.js的content字段，确保所有用到Tailwind类的文件都被纳入编译范围
• 确认globals.css的Tailwind指令完整且无隐藏字符：

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

  若怀疑文件有编码/隐藏字符问题，可新建文件复制上述内容替换原globals.css

3. 彻底清除编译缓存 #

执行以下命令清理所有残留缓存：

rm -rf .next
rm package-lock.json # 若用yarn则删yarn.lock，pnpm删pnpm-lock.yaml
npm install
npm run build

4. 排查第三方依赖冲突 #

• 临时移除近期新增的样式相关依赖（如postcss插件、预处理器），验证问题是否消失
• 确保postcss.config.js仅保留Tailwind必要插件：

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

内容的提问来源于stack exchange，提问作者Jey the Count