likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 16

前言

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

1. 新建 404 页面

使用 Result 结果组件 补充:tailwindcss 和 element-plus 样式冲突解决方案 新建 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'
    }
  ]

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

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

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

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

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

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

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

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

3. 解决冲突方案

3.1 注释掉 @tailwind base 样式

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

3.2 修改优先级

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

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

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

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

① 关闭默认样式

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

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

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

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

3.4 我的解决方案

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

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

总结

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

转载自:https://juejin.cn/post/7251609043953188925
评论
请登录