当前位置: 首页 > news >正文

自动引入的element-plus覆盖tailwindcss样式冲突解决方法

用el-card时发现自带的padding非常烦人,又不想通过:deep修改就想着tailwind一把梭,参考过github上issue的解决方案但好像那些都是想让element去覆盖tailwindcss的,想到antd有对应的解决方案便参考其文档
antd文档https://ant.design/docs/react/compatible-style-cn

在引入tailwindcss时

@layer theme, base ,element,components, utilities ;
@import 'element-plus/dist/index.css' layer(element);
@import "tailwindcss";

把element的css全量导入,然后把vite.config.ts内自动引入的style关闭

Components({resolvers: [ElementPlusResolver({importStyle: false})]
}),

办法比较笨但是对于我来说300多kb的全量css文件是可以在接受范围内的,如果真的觉得不行接受不了就针对单个组件去导入

@layer theme, base ,elementCard,components, utilities ;
/* @import 'element-plus/dist/index.css' layer(element); */
@import 'element-plus/theme-chalk/el-card.css' layer(elementCard);
@import "tailwindcss";
Components({resolvers: [ElementPlusResolver({//importStyle: falsenoStylesComponents: ['ElCard']})]
}),

498a0687-d7cc-4afa-995f-d40cbeb82bdc
实测可以覆盖element样式

http://www.hskmm.com/?act=detail&tid=27576

相关文章:

  • 已严肃完成今日96种状态的超级神仙DP大学习
  • P3388 【模板】割点(割顶) tarjan
  • new day
  • 10.9每日总结
  • vLLM 吞吐量优化实战:10个KV-Cache调优方法让tokens/sec翻倍
  • Linux之周期性定时任务实践
  • MyBatis-Plus 的 QueryWrapper 应用以及在内存中处理JSON数组字符串匹配
  • P9461 「EZEC-14」众数 II
  • 提升
  • 详细介绍:win11 安装 WSL2 Ubuntu 并支持远程 SSH 登录
  • Ai元人文:论智能的“全息定帧”与“渐进式显影”机制
  • 24 LCA模拟赛2T4 colorful 题解
  • 23 LCA模拟赛2T2 异或排列 题解
  • Bugkuctf的哥哥的秘密
  • 国庆做题记录(基础算法)
  • fp16训练神经网络时出现nan问题
  • 第十篇
  • 504 品酒大会!!!!!!
  • 整体理解pai0-具身智能-01 - jack
  • 【数据结构】可撤销并查集 - Slayer
  • 皮卡鱼源码导读
  • 高斯消元学习笔记
  • newDay07
  • 10月9日
  • 从开放重定向到XSS:漏洞升级实战
  • 余弦日记
  • 【题解】P11459 [USACO24DEC] Its Mooin Time P
  • 创建一个springboot项目,mybatis连接嵌入式数据库H2,实现增删改查功能
  • 基于众包的产品质量比较与推荐算法研究
  • 10/9