VueJs中用Tailwind CSS让Naive UI Menu分隔线占满高度

我需要让垂直Naive UI Menu的分隔线占满整个网页高度，但目前分隔线长度仅与菜单项数量一致。我尝试在布局的三个位置添加Tailwind的max-h-full类，但均未生效。

我的布局代码：

<div class="max-h-full">
  <n-space vertical>
  <n-layout has-sider>
    <div class="max-h-full">
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        show-trigger
        class="max-h-full"
      >
        <n-menu
          v-model:value="activeKey"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          @update-value="selectionHandler"
        />
      </n-layout-sider>
    </div>
    <n-layout>
      <DashboardBody/>
    </n-layout>
  </n-layout>
</n-space>
</div>

环境说明：

• VueJS应用中使用Naive UI Menu，代码与官网折叠菜单示例完全一致
• Tailwind CSS配置无误（已成功给n-card应用text-purple-600类）

<n-card class="text-purple-600">
  Card Content
</n-card>

tailwind.config.js配置：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  purge: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: []
}

解决方法 #

1. 建立全局高度上下文 #

首先要让页面根容器和布局容器占满全屏高度，否则子元素的高度类无法生效。在全局样式文件中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #app {
  @apply h-full;
}

同时给n-layout添加h-full类：

<n-layout has-sider class="h-full">

2. 用深度选择器直接修改分隔线样式 #

Naive UI的菜单分隔线类为.n-menu-item-divider，由于组件样式是作用域隔离的，需要用Vue的:deep()深度选择器来覆盖默认样式。在组件的<style scoped>中添加：

:deep(.n-menu-item-divider) {
  @apply h-full;
  /* 若需要强制占满视口高度，替换为：@apply h-screen; */
}

3. 确保菜单容器高度正确 #

给n-layout-sider添加h-full类，让菜单所在的侧边栏容器占满父级高度：

<n-layout-sider
  bordered
  collapse-mode="width"
  :collapsed-width="64"
  :width="240"
  show-trigger
  class="h-full"
>

关于max-h-full无效的原因 #

max-h-full需要父级元素有明确的高度值才能生效，你之前添加的位置没有将高度传递到分隔线元素；另外Naive UI的分隔线默认高度由菜单项布局决定，必须直接命中分隔线元素修改样式才能覆盖默认行为。

内容的提问来源于stack exchange，提问作者Hokie2014