Landing page with React & Tailwindcss

Community feedback

• 

  Arshad Ali Kaldane•650

  @IamArshadAliPosted 12 months ago

  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🤓

  Marked as helpful

  0

  ---

  

  Hanane•120

  @HananeEL-2023Posted 11 months ago

  @IamArshadAli Hello, Arshad Ali Kaldane I sincerely appreciate your comment and the time you took to share your insights, I applied your recommendations, and I'm pleased to confirm that worked well for me. Thank you once again for your valuable assistance

  0

  

  Arshad Ali Kaldane•650

  @IamArshadAliPosted 11 months ago

  @elkaabahanane Hi Hanane, I'm glad you found my efforts useful. It means a lot when your efforts pay off. This is what constantly keeps me looking for people in need and helping them in any possible way. Thank you for sharing the outcome of implementing the recommendations. It's truly gratifying to know that I could be of help.

  0

  

  Hanane•120

  @HananeEL-2023Posted 11 months ago

  @IamArshadAli Keep sharing your insights and lending a helping hand.👏👏

  0

  

  Arshad Ali Kaldane•650

  @IamArshadAliPosted 11 months ago

  @elkaabahanane Definitely 👍

  0