naive ui和tailwind-css冲突解决方法

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博客

Naive UI