Next.js启用Tailwind utilities时编译报错无法解析图片路径

报错信息 #

./styles/globals.css:4:0
Module not found: Can't resolve './${imagesat}image-hero-mobile.png'

Import trace for requested module:
./styles/globals.css
./pages/_app.tsx

已确认的现象 #

• 仅在IntroSectionDropdown组件中使用过'./${imagesat}image-hero-mobile.png'格式的动态Tailwind背景类名，对应组件代码如下：

import Head from "next/head";
import Image from "next/image";
import menuList, { menuListType, menuObjectType } from "./menu";
const imagesat = "/images/01introSectionPage/";
const clients = [
    "client-audiophile.svg",
    "client-databiz.svg",
    "client-maker.svg",
    "client-meet.svg",
];

const IntroSectionDropdown = () => {
    return (
        <>   {/* <div className="right">
                        <div
                            className={`bg-[url('${imagesat}image-hero-mobile.png')] md:bg-[url('${imagesat}image-hero-desktop.png')]  h-32 w-32 bg-no-repeat bg-cover`}
                        >
                            <span className="sr-only">Hero image</span>
                        </div>
                        <img
                            src={`${imagesat}image-hero-desktop.png`}
                            alt=""
                            className="hidden md:block"
                        />
                        <img
                            src={`${imagesat}image-hero-mobile.png`}
                            alt=""
                            className="md:hidden"
                        />
                    </div> */}
        </>
    );
};
export default IntroSectionDropdown;

• 所有包含动态图片路径的代码已全部注释，报错仍存在
• 注释globals.css中的@tailwind utilities;后网站可正常运行，但Tailwind功能缺失
• 已尝试重装Tailwind、清理Next.js缓存，均未解决问题

问题原因 #

Tailwind 采用构建时静态扫描提取类名的机制，不会执行JS代码解析模板字符串中的变量，会直接将${imagesat}作为字面量路径解析，最终查找不存在的文件触发编译报错。注释代码后报错仍存在是因为缓存未彻底清理、或扫描路径包含了残留旧类名的非源码文件。

解决方案 #

按顺序执行以下操作即可修复：

• 彻底清理全量缓存
  删除项目根目录下的.next文件夹、node_modules/.cache文件夹，重新执行依赖安装命令后重启开发服务。
• 替换动态类名写法
  禁止在Tailwind任意值类名中动态拼接变量，动态背景图需求改用内联样式实现，参考写法：

  <div className="right">
    {/* 移动端图 */}
    <div
      className="md:hidden h-32 w-32 bg-no-repeat bg-cover"
      style={{ backgroundImage: `url('${imagesat}image-hero-mobile.png')` }}
    >
      <span className="sr-only">Hero image</span>
    </div>
    {/* 桌面端图 */}
    <div
      className="hidden md:block h-32 w-32 bg-no-repeat bg-cover"
      style={{ backgroundImage: `url('${imagesat}image-hero-desktop.png')` }}
    >
      <span className="sr-only">Hero image</span>
    </div>
  </div>
  

• 核对Tailwind配置文件
  检查tailwind.config.js中的content配置，仅保留源码目录，不要将.next、node_modules等构建/依赖目录加入扫描范围，标准配置参考：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 全局残留排查
  若以上操作后仍报错，全局搜索整个项目所有源码文件，查找${imagesat}关键词，删除所有未注释的动态拼接Tailwind类名残留。

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