Landing page with React & Tailwindcss

Hello there! 👋

Congratulations on completing this challenge🎉

I also faced the same issue with my projects. Here we know that our react application gets built during deployment to any server(i.e. Vercel, Netlify, Github, etc).

After a lot of trial & error, some research, and some observation, I found that when we build our react applications, the image path gets hashed e.g. ./image/bg-header.svg gets converted to ./image/bg-header-2f4ag3h.svg (same applies for each image type)

Tailwind classes (even if you use arbitrary values bg-[url(...)] or customize your theme) do not allow the image paths to get hashed and it remains the same even after the app is built. Hence, our production version doesn't know about the image path that Tailwind provides.

The solution that I found to deal with this problem is, we need to specify our background image URL from either inline-css or from CSS file like this:

// method 1
<div className="..." style={{
    backgroundImage: `url("${image}")`, // remember to use quotes when using svg as a background image
}}>...</div>

// method 2
.header-bg {
  background-image: URL(...);  // relative path to your image
}

Please let me know if you find anything insightful on this issue. 💡

I hope this helps. 👍

Happy Coding🤓