解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】

当项目中同时使用到 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>

:: 衍伸阅读

潜在的样式冲突

:: 更多内容 ::

> 开发过程中踩坑经验记录

解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】相关推荐

Naive UI修改默认样式
一.问题描述因为大创的缘故,需要做出一个网站,在搭建网站的过程中需要使用Naive UI框架,在设置样式的时候一直无法修改默认样式.小白不知道应该如何使用样式穿透,同时和Naive UI相关的博客比 ...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
less和sass支持 css modules 一样的局部环境和使用方式，解决重名样式覆盖的问题
安装 npm install --save-dev node-sass sass-loader css-loader: css-loader 会对 @import 和 url() 进行处理,就像 js ...
修改naive ui默认样式，css变量值修改
新项目开发使用了naive ui组件库,使用组件时涉及到css样式修改,可以直接在组件父容器上使用组件内自带的css变量,组件会自动继承父容器的css变量值,不会影响其他页面使用: 示例:一个注册表单 ...
修改默认naive ui样式
修改默认naive ui样式在使用n-slider的时候不想显示marks的标记小点点.查了一下资料记录一下. 有些时候,修改不生效,看了一个帖子生效了记录一下参考文章的地址参考代码 <t ...
源码级剖析了 Naive UI 的 Button 完整过程
注意:为了让篇幅尽可能简洁一丢丢,在有些地方贴源码时,我尽可能贴最能反映要讲解内容的源码,其他重复性的代码就略去了,所以如果你自己尝试去阅读源码时,可能会发现和文章里的代码有出入.文章跑通 Naive ...
vue3+Naive UI数据表格基本使用方式
一.基础使用方式 1.引入表格及数据 <-- 表格标签 --> <n-data-table :bordered="false" :single-line=&quo ...
如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？
如何在scoped不污染组件样式的前提下,实现el-input组件样式覆盖? 讲述:关于在使用elementUI开发项目中,需要结合需求修改样式的问题? 踩了个坑,无论怎么修改样式的权重,都无法覆写e ...
element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...

解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】

:: 解决方案

:: 衍伸阅读

:: 更多内容 ::

解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】相关推荐

最新文章

热门文章