构建Vuejs Tailwindcss

Question

当我使用CLI和tailwindcss构建我的VueJS应用程序时，我的tailwind.config.js的backgroundImage部分无法工作。

下面是我的代码：

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

我的类bg-arrow_back不是在运行npm run build时创建的，我非常确定这是因为相对路径的原因，但当我阅读CLI文档时，有人说它们可以处理它(它可以处理npm run serve)。

因此，如果你有任何想法，如何使其工作？

感谢您的帮助！

Answer 1

使用vitejs和vue3以及tailwind 2.x时，配置必须如下所示：

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

在Html中，像这样使用它：

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