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

原创 已于 2022-06-27 11:02:21 修改 · 7.1k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript

于 2022-04-01 22:36:31 首次发布
在集成TailwindCSS和ElementPlus时，遇到ElementPlus的el-button样式被TailwindCSS覆盖的问题。该问题源于样式加载顺序。解决方法包括调整引入顺序，确保ElementPlus样式在后，或者在自动引入情况下，配置TailwindCSS插件注册样式。打包后可能需要为text按钮添加!important以防止样式冲突。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述

在安装了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的样式。
在这里插入图片描述

自动引入时

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

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

在这里插入图片描述

goms
关注
tailwindcss如何修改elementplus的内部样式
我愿化作繁星
03-21 989
中禁用 Tailwind 的预检样式（Preflight），避免与 Element Plus 冲突。使用 Element Plus 的官方主题工具生成自定义样式文件，再通过 Tailwind 引入。Element Plus 的样式基于 CSS 变量，可以直接覆盖这些变量实现全局修改。在 Vue 单文件组件中，使用。增强特定组件的样式。
ElementUi和tailwind共同使用可能引起样式冲突
05-31 1211
在vue项目中同时使用elementUI和tailwind可能会引起样式冲突，导致样式并没有按照你想要的结果展示出来，最明显的样子就是按钮：我使用的el-button定义的按钮，结果背景颜色变成了透明色，很是奇怪，最后定位的时候，发现是tailwind样式引起的。
Tailwind CSS：这个「原子化」神器，治好了我的CSS焦虑症！
最新发布
cloudcrafter的博客
07-01 909
Tailwind CSS 不仅仅是一个 CSS 框架，它代表了一种实用优先、约束驱动的开发范式。它用看似“原始”的原子类，组合出了惊人的开发效率和维护性。它治好了我对写CSS的恐惧和拖延症！！！（真实感受）现在让我回去手写传统CSS或捣鼓BEM，简直像让我用回诺基亚（痛苦面具！当然，工具是死的，人是活的。Tailwind 是强大的锤子，但别看什么都像钉子。理解它的理念，根据项目灵活运用，甚至吸收它的思想（设计约束、实用主义）改进你自己的工作流，这才是王道！试试吧朋友们！打开文档。
vue - tailwindcss 和 element-ui 冲突处理
寿春
02-24 4147
其实情况也比较简单，也就是先引入tailwindcss 再引入element-ui 这样element-ui就会覆盖掉tailwindcss。elementui 样式 import ‘element-plus/es/components/dialog/style/css’在使用tailwindcss 情况下，有时候会导致element-ui的样式失效最常见的是butten按钮的样式就变了。所以在保证tailwindcss的情况下对于element覆盖的样式再重新定义。引入tailwindcss。
解决tailwind与element样式冲突
qq_43548590的博客
12-01 2187
去node_modules里找到tailwindcss，把preflight.css拷贝一份放在项目中公共样式文件夹下，然后把影响到button的部分注释掉。打开F12查看按钮样式，发现是被Tailiwind的样式覆盖了，Tailwind采用的是属性选择器的方式来设置样式。el-button按钮在没有设置plain的情况下背景透明了，文字颜色也不对。拷贝到项目styles文件夹下并注释掉button的样式。prefight.css位置如下。
tailwind-override:覆盖 Tailwind CSS 类
05-31
Tailwindcss 覆盖 一种删除冲突的 Tailwindcss 类的函数，其中最右边的一个获胜。 例子： overrideTailwindClasses ( "pt-2 pt-4" ) ; // => 'pt-4' overrideTailwindClasses ( "text-pink-200 text-blue-200" ) ; // => 'text-blue-200' overrideTailwindClasses ( "text-pink-200 pt-2" ) ; // => 'text-pink-200 pt-2' (don't clash) overrideTailwindClasses ( "orange apple" ) ; // => 'orange apple' (not tailwind classes) 这有助于定义可重写顺风类的React组件。
Element Plus默认样式覆盖
ParanoidT的博客
08-03 1031
element plus覆盖默认样式
Element Plus 按需导入时 和 TailwindCSS 样式冲突解决思路
weixin_49860871的博客
05-17 2981
把 import './assets/style.css' 该语句放在 import App from './App.vue' 之前就可以解决问题，相反这会导致样式覆盖的问题。查看网络资料后都是自动引入的资料，发现可能和导入顺序有关，自己尝试后发现一种稳定的解决办法可以解决Element Plus按需导入的问题。在其他配置都完全配置好后，如果出现样式覆盖的问题，可以试着查看 main.js文件。TailwindCSS版本为3.3.2，Element Plus版本为2.3.4。
【vue3】tailwindcss和element-plus打包后样式覆盖解决方案
weixin_51083890的博客
07-18 1976
这几个方法都试一试，因为我是用了按需导入element-plus，所以tailwindcss打包后还是会覆盖样式，然后就找了各种方法，全怼上去了。甭管啥，往最上面放就完事儿了。
vue3中element-plus弹窗el-dialog的样式覆盖
程先生的博客
07-19 3000
element-plus;vue3;el-dialog;样式覆盖
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
在使用Vue.js框架结合Element UI组件库搭建后台管理系统时，el-dropdown组件的使用是实现下拉菜单功能的关键。本文将详细介绍如何在Vue+Element的环境下，搭建并实现后台管理系统的下拉菜单功能，特别是el-dropdown...
Element_Plus 分页组件 内部样式修改（较详细）
08-11
前后端分离项目
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
10-17
在Element UI框架中，`el-button`组件是一个常用的按钮组件，提供多种预设样式和功能。然而，在实际项目中，我们可能需要自定义按钮的颜色和图标以满足特定的设计需求。本篇文章将详细介绍如何在`el-button`组件中...
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
01-13
"element-ui 的 el-button 组件中添加自定义颜色和图标的实现方法" 在 Element UI 中，el-button 组件是非常常用的一个组件，但是默认情况下，它的颜色和图标都有限制。如果我们想要添加自定义的颜色和图标，该如何...
vue-cli3.0+element-ui上传组件el-upload的使用
11-28
在Vue CLI 3.0项目中，Element-UI的上传组件`el-upload`是一个非常实用的工具，用于处理各种文件上传需求。以下是对这个组件的详细解析和使用方法。 首先，`el-upload`组件提供了丰富的属性来满足各种限制条件： 1...
给我一套vue3.3+ts+Element Plus 二次封装el-table 组件 组件中包含element Plus 各类组件例如 el-tags el-button
03-28
好的，我现在需要处理用户的问题，他想要一个基于Vue 3.3和TypeScript的Element Plus组件二次封装的示例，特别是对el-table进行增强，并且集成其他组件比如el-tag和el-button。首先，我得回顾一下用户提供的参考引用...
Element plus部分组件样式覆盖记录
qq_45897239的博客
08-17 1393
一、el-button 样式 二、Popconfirm 气泡确认框 三、Popover 气泡卡片 四、Checkbox 多选框 五、Pagination 分页 六、Form 表单 七、Table 表格
解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】
^Being^
05-06 2282
当项目中同时使用到 Naive UI 和 Tailwindcss 时，出现了样式覆盖问题，Tailwindcss 样式直接将 Naive UI 样式覆盖导致无法正常使用
tailwindcss + element-plus
m0_58039950的博客
05-04 1878
note 技术栈 vite2 vue3 ts pinia vue-router element-plus tailwindcss ##–react 目标： 管理模板 1、起始，项目搭建！ vue-router yarn add vue-router@4 vue-router ts写法 index import type { RouteRecordRaw } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值