构建 Vuejs Tailwindcss 背景图片

Posted 2023-02-22

【中文标题】构建 Vuejs Tailwindcss 背景图片

【英文标题】：Build Vuejs Tailwindcss backgroundImage

【发布时间】：2021-06-22 13:01:49

【问题描述】：

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

这是我的代码：

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

运行 npm run build 时未创建我的类 bg-arrow_back 我很确定这是因为相对路径，但是当我阅读 CLI 文档时，有人说他们会处理它（并且它与 npm run serve 一样）。

那么，如果你知道如何让它发挥作用呢？

感谢您的帮助！

【问题讨论】：

我遇到了同样的问题，我通过使用 v-bind 添加图像解决了它。 :style="``background-image: url('$myDataImg')``"

那么，有没有办法将其保留在顺风出口中？使其可重复使用？ ://

我想一定有办法，但顺风文档所说的方式，它对我不起作用。

@J.Doe 你用的是什么版本的 TailwindCSS？

@juliomalves 我在 v2.0.3 上，我猜是最后一个？

【参考方案1】：

使用 vitejs 和 vue3 配置必须如下所示：

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

在 html 中这样使用它：

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