node_modules 中的顺风插值错误

Question

我正在使用带有 postcss 和 webpack + react 的最新版本的 tailwind (3.0.15)。

我有这段代码：

{/* <div className="flex flex-row justify-center items-center overflow-hidden h-[100vh] text-white">
        <div className="flex flex-row items-stretch overflow-hidden min-w-[600px] max-w-[900px] w-[calc(100%_-_100px)] h-[400px]">
          {pictures.map((item) => (
            <div
              onClick={() => setActive(!active)}
              className={
                active
                  ? `relative overflow-hidden grow-[1000] min-w-[60px] bg-center max-w-[600px] m-0 bg-auto scale-100 transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500 rounded-[40px] bg-[url('${item}')]`
                  : `relative overflow-hidden grow-[1] m-4 min-w-[60px] bg-center bg-auto-120 transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500 rounded-[30px] bg-[url('${item}')]`
              }
            >
              <div
                className={
                  active
                    ? "absolute bottom-0 left-0 right-0 h-[120px] transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500 carousel-image"
                    : "carousel-image-not left-0 right-0 bottom-[-40px] h-[120px] transition ease-[cubic-bezier(0.05, 0.61, 0.41, 0.95)] duration-500"
                }
              ></div>
            </div>
          ))}
        </div>
      </div> */}

问题在这里： bg-[url('${item}')]

我运行以这种方式编写代码后，出现以下错误：

ERROR in ./src/style.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/style.css) 5:36-71
Module not found: Error: Can't resolve '${item}' in '/Users/octaviandavid/Desktop/project/client/src'
resolve '${item}' in '/Users/octaviandavid/Desktop/project/client/src'
  Parsed request is a module
  using description file: /Users/octaviandavid/Desktop/project/client/package.json (relative path: ./src)
    using description file: /Users/octaviandavid/Desktop/project/client/package.json (relative path: ./src/${item})
      no extension
        /Users/octaviandavid/Desktop/project/client/src/${item} doesn't exist
      .tsx
        /Users/octaviandavid/Desktop/project/client/src/${item}.tsx doesn't exist
      .ts
        /Users/octaviandavid/Desktop/project/client/src/${item}.ts doesn't exist
      .js
        /Users/octaviandavid/Desktop/project/client/src/${item}.js doesn't exist
      as directory
        /Users/octaviandavid/Desktop/project/client/src/${item} doesn't exist
    resolve as module
      /Users/octaviandavid/Desktop/project/client/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/octaviandavid/Desktop/project/client/node_modules
        single file module
          using description file: /Users/octaviandavid/Desktop/project/client/package.json (relative path: ./node_modules/${item})
            no extension
              /Users/octaviandavid/Desktop/project/client/node_modules/${item} doesn't exist
            .tsx
              /Users/octaviandavid/Desktop/project/client/node_modules/${item}.tsx doesn't exist
            .ts
              /Users/octaviandavid/Desktop/project/client/node_modules/${item}.ts doesn't exist
            .js
              /Users/octaviandavid/Desktop/project/client/node_modules/${item}.js doesn't exist
        /Users/octaviandavid/Desktop/project/client/node_modules/${item} doesn't exist
      /Users/octaviandavid/Desktop/project/node_modules doesn't exist or is not a directory
      /Users/octaviandavid/Desktop/node_modules doesn't exist or is not a directory
      /Users/octaviandavid/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/style.css 8:6-142 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-112 83:0-112 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 2:0-21

webpack 5.66.0 compiled with 1 error in 6758 ms

显然，它认为有一个文件${item} 需要编译(postcss/webpack)。尝试删除 node_modules 并重新安装它们但没有任何变化，同样我尝试删除代码但没有任何变化。

Answer 1

我认为 tailwindcss 没有 url 功能。如果你弄清楚了那部分，插值就不能很好地与 tailwindcss 一起工作。使用 bg-${item} 将不起作用。它不会抛出错误，但 tailwind 不知道 ${item} 是什么，所以你永远不会有那个 class 名字。

我有类似的问题：

 const TYPES = {
   success: "green",
   warning: "yellow",
   danger: "red",
 };

我正在将 type prop 传递给组件

const messageType=TYPES[type]

然后像这样使用它：

  `bg-${messageType}-100`

为了解决这个问题，我创建了：

const BG_CLASSES = {
  success: "bg-green-100",
  warning: "bg-yellow-100",
  danger: "bg-red-100",
};

并通过：

   <div className={`${BG_CLASSES[type]}`}>

Answer 2

通过报告的问题已于 github 解决。 https://github.com/tailwindlabs/tailwindcss/issues/7138

node_modules 中的顺风插值错误

Tailwind Interpolation error in node_modules

reactjs

webpack

postcss

tailwind-css