同时引入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
1213 0
|
1月前
|
Rust 前端开发 JavaScript
Vite 8 背后的秘密:为什么尤雨溪选择了 Oxc
Oxc(The Oxidation Compiler)是用Rust打造的高性能JS/TS工具链,含解析、Lint、格式化、转换、压缩等核心组件。内存零GC、零拷贝解析、共享AST架构,使Oxlint比ESLint快100倍、Oxfmt比Prettier快30倍。已集成Vite 8,5分钟即可升级开发体验!
377 1
Vite 8 背后的秘密:为什么尤雨溪选择了 Oxc
|
资源调度 JavaScript 前端开发
|
前端开发 JavaScript
tailwindcss保姆级教程(完整版带解析)
【8月更文挑战第2天】
1732 6
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
4141 1
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
1206 0
|
前端开发 UED
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
1194 5
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
2999 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
1249 8

热门文章

最新文章