CODEWITHSUNDEEP
htmlcssreactjstailwind-cssbackground-image
badmood111
badmood111

Reputation: 81

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

Upvotes: 1

Views: 1516

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24940

The relative path being used is wrong.

./ with this you mean one heirarchy up.

But according to your question ./public/images/bg-mobile.svg

So try replacing ./ with / it should work.

Final code:

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

Upvotes: 1

badmood111
badmood111

Reputation: 81

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

Upvotes: 0

Related Questions