当项目中同时使用到
Naive UI和Tailwindcss时，出现了样式覆盖问题，Tailwindcss样式直接将Naive UI样式覆盖导致无法正常使用
:: 解决方案
- 方式一
在
main.js / main.ts文件中添加以下代码，主要原理是需要在应用初始化之前将naive-ui-style提前注入到应用当中，避免被覆盖
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
...
// 初始化应用
const init = () => {
// 添加 meta 标签，用于处理使用 Naive UI 和 Tailwind CSS 时的样式覆盖问题
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
// 创建应用
createApp(App)
.use(router)
...
.mount("#app")
}
init()
- 方式二
或者，可以在
index.html根路径下的head元素中加入一个<meta name="naive-ui-style" />元素
<html>
...
<meta name="naive-ui-style" />
...
</html>
:: 衍伸阅读
潜在的样式冲突文章来源：https://www.toymoban.com/news/detail-740198.html
:: 更多内容 ::
> 开发过程中踩坑经验记录文章来源地址https://www.toymoban.com/news/detail-740198.html
到了这里，关于解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
