Vue/Nuxt+TailwindCSS侧边栏遮挡内容问题求助

1. 调整布局组件的结构与样式 #

在你的布局组件（比如layouts/default.vue）中，将侧边栏和插槽包裹在flex容器内，借助Tailwind的弹性布局类实现横向排列：

<template>
  <div class="flex h-screen">
    <!-- 侧边栏组件 -->
    <Sidebar class="w-64 shrink-0" />
    <!-- 插槽内容区域 -->
    <main class="flex-1 overflow-auto">
      <slot />
    </main>
  </div>
</template>

关键样式说明：

• flex：将容器设置为弹性布局，让子元素默认横向排列
• shrink-0：固定侧边栏宽度，避免被主内容挤压变形
• flex-1：让插槽所在的主内容区域占据容器剩余的全部空间
• overflow-auto：当主内容超出视口高度时，自动添加滚动条

2. 修正侧边栏的内部样式 #

如果你的Sidebar组件使用了position:absolute这类脱离文档流的样式，会导致flex布局失效，需要确保侧边栏的根元素是正常的块级元素：

<template>
  <div class="h-full bg-gray-800 text-white">
    <!-- 侧边栏内部内容 -->
  </div>
</template>

3. 可选：添加响应式适配 #

如果需要适配移动端，可通过Tailwind的响应式类实现小屏幕下的纵向堆叠：

<template>
  <div class="flex flex-col md:flex-row h-screen">
    <Sidebar class="w-full md:w-64 shrink-0" />
    <main class="flex-1 overflow-auto">
      <slot />
    </main>
  </div>
</template>

屏幕宽度小于768px（md断点）时，布局会自动切换为纵向排列，适配移动设备。

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