同时引入tailwind和elementUI样式冲突

简介: vue项目中同时引入tailwind和elementUI后,button按钮样式失效的解决方案

在安装了tailwindcss + element plus 时,会发现el-button的样式被tailwindcss的样式给覆盖了。

解决步骤

1.修改样式加载顺序:我们把element-plus/dist/index.css放在tailwind后面就行了
2.秀修改tailwind.config.js配置

plugins: [
  function({addBase}) {
    addBase({
      ".el-button": {
        "background-color": "var(--el-button-bg-color,val(--el-color-white))"
      }
    })
  }
]
目录
相关文章
|
前端开发 JavaScript
Tailwind CSS:基础使用/vue3+ts+Tailwind
Tailwind CSS:基础使用/vue3+ts+Tailwind
1284 0
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
3038 0
|
Windows
Electron窗口白屏解决
Electron白屏问题主要出现在两方面: 1、electron未加载完毕html,electron自身产生的白色背景; 2、electron加载html,html处于加载渲染过程中产生的短暂白屏;
3477 0
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
1606 0
|
4月前
|
Rust 前端开发 JavaScript
Vite 8 背后的秘密:为什么尤雨溪选择了 Oxc
Oxc(The Oxidation Compiler)是用Rust打造的高性能JS/TS工具链,含解析、Lint、格式化、转换、压缩等核心组件。内存零GC、零拷贝解析、共享AST架构,使Oxlint比ESLint快100倍、Oxfmt比Prettier快30倍。已集成Vite 8,5分钟即可升级开发体验!
972 1
Vite 8 背后的秘密:为什么尤雨溪选择了 Oxc
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
1877 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
设计模式 JSON JavaScript
前端开发人员使用的顶级 Node.js 框架介绍
前端开发人员使用的顶级 Node.js 框架介绍
1900 153
前端开发人员使用的顶级 Node.js 框架介绍
|
资源调度 JavaScript 前端开发
|
前端开发 JavaScript
tailwindcss保姆级教程(完整版带解析)
【8月更文挑战第2天】
1805 6
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
1326 0

热门文章

最新文章