tailwindcss + element plus 自动引入时,el-button样式被覆盖的问题

问题描述

在安装了tailwindcss + element plus 时,会发现el-button的样式被tailwindcss的样式给覆盖了,(目前也只遇到button被覆盖的情况)。

问题分析

是样式加载顺序的问题

解决办法

https://github.com/element-plus/element-plus/issues/5693

全部引入时

可以通过调整引入element plus的样式和tailwindcss的样式的顺序
先引入tailwindcss的样式,然后在引入element plus的样式,以便让element plus的样式覆盖tailwindcss的样式。
tailwindcss + element plus 自动引入时,el-button样式被覆盖的问题_第1张图片

自动引入时

如果使用了自动引入,光是使用上面的方法,则只会在开发环境有效,在项目打包后,button的样式仍然被tailwindcss的样式覆盖。在github关于这个问题的描述上,我看到个通过配置tailwindcss的插件,来注册样式的方法来覆盖默认的样式。不过这个方法,我遇到了一个小问题,就是打包后的,text类型的按钮也被应用这个样式,于是就得全局给text类型的按钮样式 加个!important
tailwindcss + element plus 自动引入时,el-button样式被覆盖的问题_第2张图片

在这个问题的答案上又看到一种解决办法,虽然没试过,但先记录一下

tailwindcss + element plus 自动引入时,el-button样式被覆盖的问题_第3张图片

你可能感兴趣的:(vue,javascript)