ERROR - Module not found - Can't resolve './${previewSrc}' about tailwindcss HOT 2 CLOSED

Hey!

In the VideoOverlay.tsx file you have the following code:

<div
  className={`preview bg-[url('${previewSrc}')] absolute inset-0 z-[1] bg-cover bg-no-repeat`}
  onClick={() => {
    playPauseVideo()
  }}
></div>

Tailwind CSS itself doesn't execute your code, so it generates the bg-[url(…)] as-is (more info: https://tailwindcss.com/docs/content-configuration#dynamic-class-names). This means that it generates the following CSS:

.bg-\[url\(\'\$\{previewSrc\}\'\)\] {
  background-image: url('${previewSrc}');
}

Once that is generated, Next.js does optimizations for (background) images. In this case, it will look for url('${previewSrc}') which doesn't exist on disk. Note: this would also happen without Tailwind CSS if you used that literal string in the background-image.

To solve your issue, I would recommend to use a CSS variable instead:

  <div
-   className={`preview bg-[url('${previewSrc}')] absolute inset-0 z-[1] bg-cover bg-no-repeat`}
+   className={`preview bg-[url:var(--preview-src))] absolute inset-0 z-[1] bg-cover bg-no-repeat`}
+   style={{ '--preview-src': `url(${previewSrc})` }}
    onClick={() => {
      playPauseVideo()
    }}
  ></div>

This way, Tailwind generates the following CSS for bg-[url:var(--preview-src))]:

.bg-\[url\:var\(--preview-src\)\] {
  background-image: var(--preview-src);
}

Now you can generate the --preview-src dynamically at runtime using the style prop.

Hope this helps!

from tailwindcss.

Object literal may only specify known properties, and ''--preview-src'' does not exist in type 'Properties<string | number, string & {}>'.typescript(2353)
index.d.ts(1982, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

It doen't work in way you described

It work like this

style={{ backgroundImage: `var(--preview-src, url(${previewSrc}))` }}

from tailwindcss.