tailwindcss侧的解决方法（推荐）
修改tailwind.config.js文件，禁用预加载
module.exports = {
// 禁用预加载，修复tailwind样式 与 naive-ui button等样式等冲突问题
corePlugins:{
preflight: false
},
purge: [ "./index.html",
"./src/**/**/*.{vue,js,ts,jsx,tsx}",],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}tailwind预加载，是为了保持一个新项目的风格统一，会把原本html自带的一些标签，如h1-h5, img，ul，padding等样式的默认风格和作用给移除掉，当然这对已有的项目集成tailwindcss是不友好的，所以可以禁用掉，详情可参考tailwind的官方介绍：Preflight - Tailwind CSS
naive-ui侧的解决方法（不推荐）
将src/main.ts改成下面这样，原理是让naive-ui-style在 app 挂载之前动态的插入 meta 标签，防止TailwindCSS造成样式覆盖：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
async function bootstrap() {
const app = createApp(App)
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
app.mount('#app')
}
bootstrap()这种方式经测试， 按钮样式可以恢复，但部分字体的样式却仍然失效，比如：
<h2 style="text-align: center">大数据平台</h2>参考文档：
NaiveUI和TailwindCSS的样式冲突问题解决 | hash070's blog
naiveui和tailwin样式冲突导致n-button背景成透明问题解决方法_tailwind背景色透明怎么设置_Bear2IT的博客-CSDN博客文章来源：https://www.toymoban.com/news/detail-696850.html
Naive UI文章来源地址https://www.toymoban.com/news/detail-696850.html
到了这里，关于naive ui和tailwind-css冲突解决方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
