Element-Plus 如何与 TailwindCSS 实现样式兼容？

Question

element-plus如何兼容第三方样式库tailwindcss?

我希望tailwindcss的样式尽可能的覆盖element-plus中的样式。

但事实上相同特殊度下，element-plus的样式覆盖了tailwindcss中的样式

注：在ant design中有专门的章节讲样式兼容问题，而element-plus中没有。

Answer 1

理论上来说，如果 element-plus 的样式没有高优先级的话，你把 tailwindcss 样式放后面加载就好了。

Answer 2

vite创建的项目下设置

// src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// src/main.js
import { createApp } from "vue";
import "element-plus/dist/index.css";            // element-plus样式放置在前面
import "./style.css";                            // 包含tailwindcss样式放置在后面
import App from "./App.vue";
import elementPlus from "element-plus";

const app = createApp(App);
app.use(elementPlus);
app.mount("#app");

注:
element-plus的样式需要单独引入，而ant design的样式使用的是css in js，所以element-plus样式兼容方面应该更容易一些。