vue.js 排除被顺风摇动树木的职业

f45qwnt8 于 2022-11-17 发布在 Vue.js

关注(0)|答案(3)|浏览(121)

有没有办法排除某些类被树摇动？我问的原因是在我的JavaScript中我使用了一个任意值，例如bg-[url('/img/hero-pattern.svg')]，但是url是通过Vue计算的属性传递的，例如bg-[url('/img/hero-pattern.svg')]。

`bg-[url('${this.image}')]`

我不认为这是被承认，虽然我不确定。
我知道如何将tailwind.config.js与purge选项一起使用，而且问题似乎不存在，因为Vue组件中的其他类也包括在内。
我使用mode: 'jit'选项来允许任意值。

vue.js

来源：https://stackoverflow.com/questions/70597881/exclude-a-class-being-tree-shaken-by-tailwind

3条答案

按热度按时间

s8vozzvw1#

作为最后的手段，您可以将类安全列表

module.exports = {
  content: [
    './pages/**/*.{html,js}'
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

更多信息，请访问https://tailwindcss.com/docs/content-configuration#safelisting-classes

赞(0）回复(0）举报 2022-11-17

knsnq2tg2#

我刚刚注意到我在Nuxt中使用的安全列表。我将结合基于Github问题评论的建议使用安全列表模式，例如。

options: {
      safelist: {
        greedy: [
          /^bg-/
        ]
      }
    }

不幸的是，在我的用例中，我不能使用上面的方法，因为计算类的名字不被支持。相反，我不得不使用内联样式。

赞(0）回复(0）举报 2022-11-17

67up9zun3#

现在将其他解决方案更新为TailWind 3.1.2。在tailwind.config.js中插入

safelist: [
    {
      pattern: /^(bg-|border-|text-)/,
      variants: ["hover", "active"],
    },
  ],

赞(0）回复(0）举报 2022-11-17

我来回答

vue.js 排除被顺风摇动树木的职业

3条答案

相关问题

热门标签

最新问答