用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']})]
}),
实测可以覆盖element样式