[Style] [All] 不使用 vue-router 时，与 tailwindcss 的兼容性问题

[Cat7373]

Bug Type: Style

Environment

• Vue Version: 3.4.8
• Element Plus Version: 2.5.1
• Browser / OS: Edge/120.0.0.0 / macOS 14.2.1 (23C71)
• Build Tool: Vite

Reproduction

Related Component

• All

Reproduction Link

Github Repo

Steps to reproduce

1. 创建一个最小的 Element-Plus 项目，使用 Vue-Router 默认导航到 /home 页面
2. 在 /home 页面放置几个 el-button
3. 运行项目，button 正常显示、工作
4. 将 router-view 去掉，改为直接引入 /home 页面的组件
5. button 的背景色消失，导致看不到按钮上的字（这只是问题之一，还会带来好多其他不正常的地方，这是最小化复现方式）

What is Expected?

页面正常显示和工作

What is actually happening?

button 的背景色消失，导致看不到按钮上的字

Additional comments

1. 使用 router-view，按钮正常展示和使用

   

   

2. 直接引入组件，按钮无法正常使用

   

   

[Cat7373]

我猜测是在 createApp 之前，就通过 main.js import 了App.vue，然后关联 import 了home/index.vue，导致home/index.vue中初始化什么东西过早而出现的这个问题。

提出这个 Issue 的原因是，我似乎暂时没找到方法，在单页面应用中不使用vue-router

[Cat7373]

我找到了一个方案，可以让组件正常工作，但控制台会输出一个警告：

<template lang="pug">
el-config-provider(:locale="zhCn")
  component(:is="homeView")
</template>

<script setup>
import { ref, onMounted } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const homeView = ref()

onMounted(async () => {
  homeView.value  = (await import('@/views/home/index.vue')).default
})
</script>

[Cat7373]

将 ref 替换为 shallowRef 可以规避警告，似乎这样可以解决组件不正常的问题，但是否，Element-Plus 应该考虑支持没有 vue-router 的环境？

[btea]

It seems to be a problem with tailwind. The default style introduced here overrides the element-plus style.

After I commented out the basic styles, it looked normal.

[btea]

Releated pr tailwindlabs/tailwindcss#12735.

[Cat7373]

我还以为 tailwindcss 不会造成什么问题呢，原来是它与包括 Element-Plus 在内的广泛第三方库的兼容问题😂

其实 pinia 在这种情况下工作也不正常，似乎用component(:is="homeView")是一个比较好的解决方案

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。