同时引入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))"
      }
    })
  }
]
目录
相关文章
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
108 1
|
3月前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
4月前
ElementUI——elementui重复引入样式
ElementUI——elementui重复引入样式
43 1
|
6月前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
前端开发
80Vue - 过渡的-CSS-类名
80Vue - 过渡的-CSS-类名
44 0
|
前端开发 JavaScript
react-32-样式隔离-引入css方式-vue对比
样式污染是开发常遇到的问题 解决办法其实就是让class名不重复,针对这个不重复有很多方法 1.1 class命名不重复:工具实现命名唯一 1.2 CSS Modules模块化 1.3 Styled-component 在之前文章代码基础上进行修改react-路由传参
1159 0
react-32-样式隔离-引入css方式-vue对比
|
JavaScript
Vue中避免样式冲突 scoped 属性的方法
Vue中避免样式冲突 scoped 属性的方法
|
JavaScript 前端开发
vue引入外部的css文件
vue引入外部的css文件
76 0
|
JavaScript
Vue -- scoped 组件间的样式冲突
Vue -- scoped 组件间的样式冲突
|
JavaScript 前端开发
Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题
Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题
308 0