如何让 Tailwind 和 Vuetify 协同工作而不会导致样式伪影？答案

【问题标题】：How do I get Tailwind and Vuetify to work together without causing style artifacts?如何让 Tailwind 和 Vuetify 协同工作而不会导致样式伪影？
【发布时间】：2019-10-26 07:58:41
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： vuetify.js nuxt.js tailwind-css

【解决方案1】：

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

要将 Vuetify 添加到使用 Tailwind CSS 而不会发生 CSS 类冲突的现有项目中，您只需在 Vuetify 选项中激活 treeShake。

例如在 Nuxt 项目中，在nuxt.config.js 中添加以下 sn-p：

export default {

// Other Configs

vuetify: {
    treeShake: true
  },
}

【讨论】：

你能解释一下'treeShake'是做什么的吗？
它删除了未使用的 CSS 类和样式，因此 .flex 和 vuetify 样式等类的顺风样式之间不会发生冲突。

【解决方案2】：

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

【讨论】：

这应该是最好的答案！