vue.js - 仅在构建时添加 Vue3 和 TailwindCSS 前缀

Question

将新的前端堆栈(Vue3、Tailwind CSS)引入到已经建立的应用程序中。

旧堆栈具有依赖项，其中包括与 Tailwind 冲突的 CSS 类。

最终目标是仅使用 Vue 和 TailwindCSS，所以我不想在开发过程中使用前缀，因为它没有必要......但我需要同时支持旧的和新的堆栈，直到我能够完全删除旧的 CSS。

我知道在 TW 配置中使用了 prefix 属性(prefix: 'tw-',)，但这意味着源 .vue 文件需要使用该前缀。

我是否可以在仅构建期间告诉 Vue(使用 Vite)为所有类添加前缀，然后同样在仅构建期间将规则传递给 Tailwind 来添加前缀(但在开发过程中不需要)？

我看到一个类似的问题，其中的答案提到如果TW中存在这种情况，那么TW如何知道哪些要转换，哪些不转换......我理解这一点，但在我的场景中我没有其他插件。

我简要了解了 postcss-prefixer 但不确定这是否是我需要的......

我想我可以使用 TW 前缀，因为它不是世界末日，但对我的最终目标来说感觉很肮脏......

Answer 1

你想要实现的目标似乎不可能 - Vite(或 Vue 模板编译器)如何知道哪些 CSS 类是 Tailwind 的，哪些来自你的旧堆栈(如果它们具有相同的名称)？避免此类冲突的唯一方法是在 TW 配置中使用前缀。
它可能看起来很脏(对你来说) - 但即使 Tailwind 是项目中唯一的 CSS 框架，我也总是使用该前缀，因为将来可能会存在具有冲突 CSS 类的第三方依赖项。

也许最干净的解决方案是完全重构您的应用程序，并通过删除/转换所有旧 CSS 完全切换到 Tailwind。