Set an image saved localy as background with Tailwind in a NextJS proj

Set an image saved localy as background with Tailwind in a NextJS proj

Dear Diary,

Today, I acted like a total dumbfuck!

I just struggled 10 minutes to setup a locally saved image as a background in a NextJS component using tailwind.

I am writing this so that if you're in the same position, you don't get frustrated as I did.

      #Component where you want to add the image
      #Save the image in the nextjs public folder.

      <div
        className={`h-screen bg-no-repeat bg-cover`}
        style={{ backgroundImage: `url('/awesome-bg.png')` }}
      >
            Text inside the component
      </div>

Remember to refer back to this if you forget again, you dumbfuck!