自动引入的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: false
            noStylesComponents: ['ElCard']
          })
      ]
}),

实测可以覆盖element样式