iPhone端Tailwind代码块水平滚动条默认不显示问题求助

iPhone的WebKit内核默认会隐藏水平滚动条，仅在滚动操作时才显示。要让滚动条始终可见以提示用户可横向滚动，需自定义WebKit滚动条样式，结合Tailwind可采用以下两种方案：

方案一：自定义Tailwind工具类（推荐，可复用） #

修改你的tailwind.config.js，添加自定义滚动条工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.scrollbar-always': {
          '-webkit-overflow-scrolling': 'touch', // 保留iOS顺滑滚动特性
          '&::-webkit-scrollbar': {
            height: '6px', // 必须设置高度，否则iOS仍会隐藏滚动条
          },
          '&::-webkit-scrollbar-track': {
            backgroundColor: '#f3f4f6', // 对应Tailwind的bg-gray-100
            borderRadius: '3px',
          },
          '&::-webkit-scrollbar-thumb': {
            backgroundColor: '#d1d5db', // 对应Tailwind的bg-gray-300
            borderRadius: '3px',
          },
        },
      });
    },
  ],
};

给容器添加这个工具类：

<div className="mx-auto mt-6 mb-6 max-w-2xl overflow-x-scroll rounded-sm bg-gray-200 px-4 py-4 md:overflow-x-auto scrollbar-always">
  <!-- 你的横向滚动内容 -->
</div>

方案二：直接添加内联/全局CSS（无需修改配置） #

如果不想改动Tailwind配置，可直接给容器添加自定义CSS：

内联样式（React/Vue等框架适用） #

<div 
  className="mx-auto mt-6 mb-6 max-w-2xl overflow-x-scroll rounded-sm bg-gray-200 px-4 py-4 md:overflow-x-auto"
  style={{ WebkitOverflowScrolling: 'touch' }}
>
  <style>{`
    div::-webkit-scrollbar {
      height: 6px;
    }
    div::-webkit-scrollbar-track {
      background: #f3f4f6;
      border-radius: 3px;
    }
    div::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 3px;
    }
  `}</style>
  <!-- 你的横向滚动内容 -->
</div>

全局CSS #

在项目全局样式文件中添加：

.scrollbar-visible {
  -webkit-overflow-scrolling: touch;
}
.scrollbar-visible::-webkit-scrollbar {
  height: 6px;
}
.scrollbar-visible::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

然后给容器添加scrollbar-visible类即可。

关键注意事项 #

• 必须设置::-webkit-scrollbar的height属性，这是让iOS持续显示滚动条的核心
• 保留-webkit-overflow-scrolling: touch，否则iOS上滚动会失去顺滑的弹性效果
• 可根据项目配色调整滚动条的背景色和滑块颜色，与Tailwind主题保持一致

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