Next.js与Tailwind CSS开发时x轴滚动条不显示问题求助

问题原因 #

• 类名拼写不完整：代码中的overflow-是无效Tailwind类，未指定溢出处理的方向和规则
• 错误添加了scrollbar-hide类：该类的作用是主动隐藏滚动条，会导致滚动条视觉上不可见
• Flex子元素默认收缩：Flex容器的直接子项默认开启flex-shrink: 1，会自动压缩宽度适配父容器，不会撑出横向溢出空间，无法触发横向滚动

修复方案 #

1. 给Flex容器替换为合法的溢出类：使用overflow-x-auto实现x轴溢出时自动展示滚动条，y轴溢出默认隐藏
2. 根据需求处理scrollbar-hide类：如果需要视觉上显示滚动条直接移除该类；如果需要保留滚动功能仅隐藏滚动条可以保留该类
3. 给所有MediumCard组件添加flex-shrink-0类，禁止子项被压缩，保持原有宽度撑开容器触发溢出

修复后代码 #

<section>
    <h2 className="text-4xl font-semibold py-8">Live Anywhere</h2>
    <div className="flex space-x-3 overflow-x-auto">
            {cardsData?.map(({ img, title }) => (
              <MediumCard key={img} img={img} title={title} className="flex-shrink-0" />
            ))}
    </div>
</section>

如果MediumCard组件不支持传入className，可以在外层包裹一层div设置禁止收缩：

{cardsData?.map(({ img, title }) => (
  <div key={img} className="flex-shrink-0">
    <MediumCard img={img} title={title} />
  </div>
))}

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