Tailwind水平滚动问题：文字换行与滚动条隐藏方案咨询

代码示例 #

<div className="bg-red-300">
  <div className="bg-red-400">
    <div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto">
      <div className="flex space-x-2">
        <div>Explore:</div>
        <div className="font-bold underline">Shoes</div>
        <div className="font-bold underline">Clothing</div>
        <div className="font-bold underline">Accessories</div>
        <div className="font-bold underline">Premium</div>
        <div className="font-bold underline">Sport</div>
        <div className="font-bold underline">Shop All</div>
      </div>
    </div>
  </div>
</div>

问题1：移动端下“Shop All”自动换行的原因及修复方案 #

原因：内层承载文本的div元素默认会根据容器宽度自动换行，当移动端屏幕宽度不足时，“Shop All”这类带空格的文本会被拆分换行，破坏了水平滚动的布局逻辑。

修复方案：给文本元素添加whitespace-nowrap类强制文本不换行，也可以直接给内层的flex容器添加该类，让所有子元素继承不换行规则。修改后的核心代码如下：

<div className="flex space-x-2 whitespace-nowrap">
  <div>Explore:</div>
  <div className="font-bold underline">Shoes</div>
  <div className="font-bold underline">Clothing</div>
  <div className="font-bold underline">Accessories</div>
  <div className="font-bold underline">Premium</div>
  <div className="font-bold underline">Sport</div>
  <div className="font-bold underline">Shop All</div>
</div>

这样所有文本都会保持单行显示，超出容器宽度时触发水平滚动。

问题2：Tailwind CSS中隐藏滚动条的方法 #

Tailwind CSS没有内置隐藏滚动条的工具类，可通过以下两种方式实现：

方式1：自定义Tailwind工具类

在tailwind.config.js中添加自定义工具类，后续可全局复用：

module.exports = {
  // 其他配置项
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          '-webkit-overflow-scrolling': 'touch',
          'scrollbar-width': 'none',
          '-ms-overflow-style': 'none',
        },
        '.scrollbar-hide::-webkit-scrollbar': {
          display: 'none',
        }
      })
    }
  ],
}

使用时直接给滚动容器添加类名：

<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto scrollbar-hide">
  <!-- 内容区域 -->
</div>

方式2：内联样式（临时场景）

若不想修改配置，可直接给容器添加内联样式（仅适配部分浏览器，建议优先用自定义类）：

<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto" style={{
  scrollbarWidth: 'none',
  msOverflowStyle: 'none',
  WebkitOverflowScrolling: 'touch'
}}>
  <!-- 内容区域 -->
</div>

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