I am using NextJS and Tailwind CSS. Previously, I had this code (note: generatedImage is a url of an image):

<div
        ref={innerref}
        className={`${
            generatedImage ? `bg-[url(${generatedImage})]` : "projects-bg"
        } w-screen h-screen bg-cover mt-0 flex flex-col items-center`}
    >

After, I realised that you can’t put variables inside tailwind classes, due to it throwing

so I changed it to the code below:

<div
        ref={innerref}
        className={`${
            !generatedImage && "projects-bg"
        } w-screen h-screen bg-cover mt-0 flex flex-col items-center`}
        style={{
            backgroundImage: generatedImage && `url(${generatedImage})`,
        }}
    >

global.css:

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

...bunch of css

However, it still throws the same error, even after resetting the stream (yarn dev). How do I make the error go away, and is the second piece of code valid? I think it is caused by tailwind, due to the error going away after removing @tailwind utilities, along with all the tailwind styles.