I'm having trouble getting the background image to show up correctly using tailwind.Config.Js. Even though Tailwind.Config.Js is generating the background image perfectly, when I view it in the browser, it's displaying a 404 error for the image.
Here is a snippet of my code from tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('../images/px1.gif')",
})
},
},
variants: {
extend: {},
},
plugins: [],
}
Here is the webpack setup section
let mix = require("laravel-mix");
mix.js("src/js/app.js", "js/app.js")
mix.css("src/css/app.css", "css/app.css")
.options({
postCss: [require("tailwindcss")],
}).setPublicPath('public')
This is the folder structure
The output CSS I am currently getting is:
.bg-hero-pattern {
background-image: url(/images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}
The desired output CSS should be:
.bg-hero-pattern {
background-image: url(../images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}