Photo by Peter Schulz on Unsplash
Set an image saved locally as background with Tailwind in a NextJS project
Hey Dumbfuck, this is how you set an image saved localy as background with Tailwind in a NextJS project
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!