如何在Tailwind CSS中隐藏滚动条？附代码场景示例

针对你的商品卡片滚动场景，这里有两种实用方法可以隐藏滚动条同时保留滚动功能：

方法一：自定义Tailwind工具类 #

修改项目根目录下的tailwind.config.js，添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      utilities: {
        ".scrollbar-hide": {
          /* 适配Chrome、Safari、Opera */
          "-webkit-scrollbar": "none",
          /* 适配IE、Edge */
          "-ms-overflow-style": "none",
          /* 适配Firefox */
          "scrollbar-width": "none",
        },
      },
    },
  },
  plugins: [],
};

之后给包裹商品卡片的滚动容器添加scrollbar-hide类即可：

<div class="flex overflow-x-auto scrollbar-hide">
  <!-- 你的商品卡片代码 -->
  <div>
    <h3>美式女孩牛仔裤</h3>
    <p>$25.00 <s>$55.00</s></p>
    <div>★★★★★</div>
    <p>这是一张更宽的卡片，下方有辅助文本作为额外内容的自然引导，内容稍长一些。</p>
    <button>加入购物车</button>
    <span>❤️ ❤️</span>
  </div>
  <!-- 其他商品卡片 -->
</div>

方法二：用@layer直接定义样式 #

如果不想改动配置文件，可在项目的CSS文件中通过@layer定义样式：

@layer utilities {
  .scrollbar-hide {
    -webkit-scrollbar: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

同样给滚动容器添加scrollbar-hide类就能实现效果。

各属性说明 #

• -webkit-scrollbar: none：针对基于WebKit内核的浏览器隐藏滚动条
• -ms-overflow-style: none：适配微软系的IE和Edge浏览器
• scrollbar-width: none：适配Firefox浏览器

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