Tailwind config background image path on Gridsome / Vue

0
votes

I am using Tailwind in our Gridsome created web page, but i got an error in backgroundImage in tailwind.config.js file. Here is the file:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: theme => ({
        'mobile': "url('~/assets/mobile_background.jpg')"
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

The error i got is:

This relative module was not found:

  • ../../../../../../../assets/mobile_background.jpg in ./node_modules/css-loader/dist/cjs.js??ref--2-oneOf-1-1!./node_modules/postcss-loader/src??ref--2-oneOf-1-2!./src/main.css
1
vue.jstailwind-cssgridsome

1 Answers

0
votes

I found the solution after a some tries. I have to put the assets folder under /static to use it in tailwind.config.js just like this:

extend: {
 backgroundImage: theme => ({
  'mobile': "url('~/assets/mobile_background.jpg')"
 })
},