I'm using the latest version of tailwind (3.0.15) with postcss and webpack react.

I had this piece of code:

{/* <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> */}

The problem is here : bg-[url('${item}')]

After I ran the code in this manner, I got the following error:

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

Apparently, it thinks that there is a file ${item} to be complied (postcss/webpack). Tried removing node_modules and reinstalling them but nothing changes, similarly I tried removing the code but nothing changes.

CodePudding user response：

I do not think that tailwindcss has url function. If you figure out that part, interpolation does not work well with tailwindcss. using bg-${item} would not work. It would not throw error but tailwind would not know what ${item} is so you would never had that class name.

I had similar issue:

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

I was passing type prop to the component

const messageType=TYPES[type]

then using it like this:

  `bg-${messageType}-100`  

To solve this I created:

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

and pass:

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

CodePudding user response：

Solved on github via issues reported. https://github.com/tailwindlabs/tailwindcss/issues/7138