vuetify.js - 如何让 Tailwind 和 Vuetify 协同工作而不会导致样式伪影？

Question

我昨天工作了一整天，完成了一个谷歌云功能，为预约者 vue 组件提供动力。最后一步实际上是使用返回对象的 UI。我计划使用带有允许日期和时间的 vuetify 日期/时间选择器。

在今天花费大量时间尝试将 vuetify 添加到现有项目以仅将其用于组件之后，它会导致来自 main.sass 的某些类（边距等）出现样式错误。

我想为顺风添加一个前缀，但我没有时间或意愿返回我的所有组件和文件以将前缀添加到我的所有顺风类。

我可以做些什么来确定 vuetify 类/css 的范围，以免在我尝试使用的两个组件之外引起问题？

我可以在编译和组装顺风之后添加 vuetify css，以便顺风类获胜优先吗？

我没有要显示的代码，因为它相当简单。我认为谷歌日历 API 将是这个组件中最难的部分，但事实证明它更容易。

score 4 · Accepted Answer

Tailwind 允许您在配置文件中为生成的类添加前缀。请参阅https://tailwindcss.com/docs/configuration

score 3 · Accepted Answer

我知道现在回答为时已晚，但我正在为像我这样提出这个问题的其他人写这篇文章。

为了将 Vuetify 添加到使用 Tailwind CSS 而没有 CSS 类冲突的现有项目中，您只需treeShake在 Vuetify 选项中激活即可。

例如，在 Nuxt 项目中，将以下代码段添加到nuxt.config.js：

export default {

// Other Configs

vuetify: {
    treeShake: true
  },
}

2 回答 2