补充：tailwindcss 和 element-plus 样式冲突解决方案

前言

今天在配置项目全局 404 页面的时候，发现 element-plus 的按钮样式没了，我估计是和 tailwindcss 冲突了，我快速还原一下场景。

1. 新建 404 页面

使用 Result 结果组件 新建 view/errors/NotFountPage.vue

<script setup lang="ts">
import router from '@/router'
</script>
<template>
  <el-result icon="warning" title="404提示" sub-title="你找的页面走丢了~">
    <template #extra>
      <el-button type="warning" @click="router.push('/')">回到首页</el-button>
    </template>
  </el-result>
</template>
<style scoped lang="scss"></style>

2. 配置 404 路由

// router/index.ts
import NotFound from '@/views/errors/NotFoundPage.vue'
...
routes: [
   ...
    {
      path: '/:pathMatch(.*)*',
      component: NotFound,
      name: 'NotFound'
    }
  ]

随便访问一个没有定义的路径

打开控制台，可以看到 button 上被定义了一个优先级更高的样式，将背景颜色设置成了透明。

验证我的猜想，我把 styles/index.scss 中的 @tailwind base; 注释掉。发现确实这个样式没有了。

证明我的猜想是正确的，既然原因找到了，接下来就看怎么合理的解决这个问题了。

3. 解决冲突方案

3.1 注释掉 @tailwind base 样式

这种方式最简单，但是有点捡了芝麻丢了西瓜的感觉

3.2 修改优先级

这种方式我也没有试过，网上查到的，因为我是通过按需加载引入的 element-plus，所以不方便控制样式加载顺序。如果使用这种方式需要将 element-plus 改成全量引入，然后修改引入样式的顺序。

3.3 关闭默认样式，手动解决冲突

这个是查阅官方 issue 提供的解决方案，具体可以看这里：github.com/element-plu…

① 关闭默认样式

// 关闭默认样式
// tailwind.config.js
...
export const corePlugins = {
  preflight: false
}
...

② 手动导入样式，对有冲突的样式进行解决

下载 preflight.css, 下载地址，注意下载的版本。 引入 preflight.css, 并且找到冲突，注释掉

3.4 我的解决方案

什么都不要改，把全局样式放在最前面

总结

其实每种方式都可以，主要看我们自己考量的点，我觉得全局样式应该最先被加载到，组件的样式去覆盖全局。全局样式是整个应用程序的基础样式定义，而组件样式是对于基础的补充，全局就应该放在最前面。