如何让 Tailwind 和 Vuetify 协同工作而不会导致样式伪像? [英] How do I get Tailwind and Vuetify to work together without causing style artifacts?

问题描述

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

I worked all day yesterday to finish a google cloud function to power an appointment maker vue component. The last step is actually UI using the returned object. I was planning on using the vuetify date/time pickers with allowed dates and times.

在今天花了很多时间尝试将 vuetify 添加到现有项目以仅将它们用于组件之后，它导致来自 main.sass 的某些类(边距等)的样式错误.

After spending much of today trying to add vuetify to an existing project to only use those to components, it is causing style errors with some classes(margin, etc) that are coming from main.sass.

我曾想过为 tailwind 添加前缀，但我没有时间或不想返回到我的所有组件和文件以将前缀添加到我的所有 tailwind 类.

I thought of adding a prefix to tailwind, but I don't have the time or inclination to go back to all of my components and files to add the prefix to all of my tailwind classes.

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

Is there something I can do to scope the vuetify classes/css so as not to cause problems outside of the two components I am trying to use?

我可以在我的 tailwind 编译和组装后添加 vuetify css 以便使 tailwind 类获胜吗?

Can I add the vuetify css after my tailwind is compiled and assembled so the tailwind classes win take precedent?

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

I don't have code to show as it is fairly straight forward. I thought the google calendar API would be the hardest part of this component, but it is proving to be the easier.

推荐答案

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

Tailwind allows you to prefix the generated classes in the configuration file. See https://tailwindcss.com/docs/configuration

这篇关于如何让 Tailwind 和 Vuetify 协同工作而不会导致样式伪像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！