Tailwind how to make nav tabs always show scroll bar?

在使用 TailwindCSS 开发网页时，有时候我们需要在导航标签（如侧边栏导航）中始终显示滚动条。这样可以在内容超出可视区域时，用户依然可以通过滚动条来浏览全部内容。要实现这一功能，可以通过 CSS 的 overflow 属性来控制。

在 TailwindCSS 中，我们可以使用以下类来实现始终显示滚动条：

• overflow-auto: 当内容超出容器大小时，显示滚动条。
• overflow-y-auto: 当垂直方向的内容超出容器大小时，显示垂直滚动条。
• overflow-x-auto: 当水平方向的内容超出容器大小时，显示水平滚动条。

然而，如果希望无论内容是否溢出都始终显示滚动条，可以使用以下策略：

1. 使用 overflow-y-scroll，这会在垂直方向上始终显示滚动条，不管内容是否超出容器。

示例

假设我们有一个侧边导航栏，我们希望无论内容多少都显示垂直滚动条：

html
<div class="h-screen w-64 overflow-y-scroll bg-gray-200 p-4">
  <ul>
    <li>首页</li>
    <li>关于我们</li>
    <li>产品</li>
    <li>服务</li>
    <li>联系方式</li>
    <!-- 可能还有更多链接 -->
  </ul>
</div>

在这个例子中，.h-screen 设置导航栏的高度为视窗的全高，.w-64 设置固定宽度，.overflow-y-scroll 确保垂直滚动条始终显示，而 .bg-gray-200 和 .p-4 是为了设置背景色和内边距。

这种方法简单直观，可以很容易地集成到 TailwindCSS 的工作流中，确保用户界面的一致性和可用性。