Search code examples
htmlcssreactjstailwind-cssbackground-image

TailwindCSS - background image not loading on build

I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.

The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.

  1. I'm using the Vite buildtool, React and TailwindCSS.
  2. The image path is ./public/images/bg-mobile.svg
  3. I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.

If anyone knows what I'm doing wrong, I'd be really happy to know.

//tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "huddle-violet": "hsl(257, 40%, 49%)",
        "huddle-magenta": "hsl(300, 69%, 71%)",
      },
      backgroundImage: {
        "desktop": "url('./images/bg-desktop.svg')",
        "mobile": "url('./images/bg-mobile.svg')"
      },
    },
  },
  plugins: [require('prettier-plugin-tailwindcss')],
};

//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

Link to the hosted site

Link to the Github repo

Solution 
  • backgroundImage: {
  "desktop": "url('/images/bg-desktop.svg')",
  "mobile": "url('/images/bg-mobile.svg')"
},