构建 Vuejs Tailwindcss 背景图片

Question

When I'm building my VueJS app using CLI and tailwindcss, my backgroundImage part of tailwind.config.js doesn't work.

Here's my code:

const plugin = require('tailwindcss/plugin')
module.exports = {
...
   backgroundImage: {
      'arrow_back': "url('./assets/img/arrow_back.svg')"
   }
...
}

My class bg-arrow_back isn't created when run npm run build I'm pretty sure it's because of the relative path, but when I'm reading the CLI doc, there are saying they handle it (and it does with npm run serve ).

So if you have any idea of how to make it works?

Thanks for help !

Answer 1

With vitejs and vue3 the config has to look like this:

theme: {
extend: {
  backgroundImage: {
    'logo-test': "url('/src/assets/logo-test.svg')"
  }
},

In the Html use it like this:

<div class="bg-logo-test"></div>