tailwind css config file background image issue

user_16522942 0
Viewed 2248

I am not getting background image output from the tailwind.Config.Js. Tailwind.Config.Js perfectly generate the background image but when I see the output on browser it's showing image 404 .

here is my code sample of tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      // backgroundImage: theme => ({
      //   'body-bg': "url('./../images/px1.gif')",
      // })
      backgroundImage: theme => ({
        'hero-pattern': "url('../images/px1.gif')",
       })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

here is the webpack setup

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')

here is the folder structure

enter image description here

i am getting this output css

.bg-hero-pattern {
  background-image: url(/images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}

output CSS should be this

.bg-hero-pattern {
  background-image: url(../images/px1.gif?9ee64f464ce65b98bb9e4168105dc9b3);
}
tailwind-css filepath css
2 Answers

add ~ before path file

theme: {
   extend: {
   backgroundImage: theme => ({
    'hero-pattern': "url('~/images/px1.gif')",
   })
   },
},
user_73587650

I hope this answer will help for those who faced same problem like me.

After few research on my code I found the solution and it work for me. I need to add this processcssurls: true, in the mix.Option . You can learn it for here Laravel Mix Options

user_165229420
Related