1

I have customized Background Image in tailwind.config file and it displays on the local host as expected, however after I deployed the site on Github pages, the background image doesn't display.

Here is the code in the tailwind.config file.

   backgroundImage: {
        'heroMobileBg': "url('/public/images/bg-intro-mobile.svg')",
        'heroDesktopBg': "url('/public/images/bg-intro-desktop.svg')",
      },

Here is where I used it.

 <div class="bg-heroMobileBg bg-no-repeat bg-center bg-cover lg:bg-heroDesktopBg"></div>

I tried using the arbitrary values but still couldn't display on deployment. using the dev tools, I could see the background image stated.

.bg-heroMobileBg {
    background-image: url(/public/images/bg-intro-mobile.svg);
}

I can't seem to figure out what am missing, kindly help me.

santino majur
  • 11
  • 4
  • Probably there must have been some change in the path of the images. It would be easier to give an accurate answer if you shared the repository. – Rohling Dec 15 '22 at 21:41
  • @Rohling I thought that was the problem but I have crossed check the paths. Here’s the repo https://github.com/SanMajur/easybank – santino majur Dec 15 '22 at 23:05
  • In your `tailwind.config.js`, you are setting the path `content: ["./public/**/*.html", "./src/**/*.js"],`. Why are you doing tailwind search for styles in the `public` directory? Shouldn't it be `content: ["./src/**/*.{html,js}"],`? Your html files should be in the `src` folder as well. – Rohling Dec 15 '22 at 23:24
  • Based on the tutorial I watched on how to setup a tailwind css in a project, the explanation was that src folder should hold the source code of the project(code that shouldn’t be accessible to anyone) and the public folder to hold all the files accessible to the public. Been using that file structure for sometimes now and I have never encounter any issues with the paths. I tried to put all the html files into src folder but it didn’t solve the problem. – santino majur Dec 16 '22 at 11:31

0 Answers0