排除被 Tailwind 摇树的类答案

【问题标题】：Exclude a class being tree-shaken by Tailwind排除被 Tailwind 摇树的类
【发布时间】：2022-01-05 18:29:37
【问题描述】：

有没有办法将某些类排除在摇树之外？我问的原因是在我的 JavaScript 中我使用了 arbitrary-value 例如bg-[url('/img/hero-pattern.svg')] 但 url 是通过 Vue 计算属性传递的，例如

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

虽然我不确定，但我不认为这是被认可的。

我知道如何将tailwind.config.js 与purge 选项一起使用，问题似乎不存在，因为Vue 组件中的其他类也包含在内。

我正在使用mode: 'jit' 选项来允许任意值。

【问题讨论】：

【解决方案1】：

我刚刚注意到safelisting 与 Nuxt 一起使用。我将结合基于this Github 问题评论的建议使用safelisting patterns，例如

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

不幸的是，在我的用例中，由于计算出的类名是not supported，我无法使用上述方法。相反，我不得不使用内联样式。

【讨论】：