使用Tailwind（Next.js/React）框架时如何自定义修改滚动条样式

问题根因 #

你之前的修改无效，核心原因是默认页面滚动条属于或元素，你给自定义div加滚动条样式时，该div并没有作为实际的滚动容器（未设置固定高度+溢出滚动规则），所以样式不会生效。

方案1：全局样式表修改（最稳定） #

1. 找到项目中Tailwind的全局入口CSS文件（通常为styles/globals.css，文件内默认包含@tailwind base; @tailwind components; @tailwind utilities;三行声明）
2. 按需求添加样式：

全局统一修改滚动条样式 #

@layer base {
  /* 适配Chrome、Edge、Safari */
  ::-webkit-scrollbar {
    width: 8px; /* 纵向滚动条宽度 */
    height: 8px; /* 横向滚动条高度 */
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道颜色 */
  }
  ::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块颜色 */
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块hover颜色 */
  }
  /* 适配Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
  }
}

如果你的需求是隐藏滚动条但保留滚动功能，替换为以下样式即可：

@layer base {
  ::-webkit-scrollbar {
    display: none;
  }
  * {
    scrollbar-width: none;
  }
}

仅给指定元素添加自定义滚动条 #

如果不想全局生效，可以自定义工具类：

@layer utilities {
  /* 适配Chrome、Edge、Safari */
  .custom-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  .custom-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }
  .custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  /* 适配Firefox */
  .custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  }
  /* 隐藏滚动条的工具类 */
  .no-scroll::-webkit-scrollbar {
    display: none;
  }
  .no-scroll {
    scrollbar-width: none;
  }
}

然后给你的外层div添加必要属性，让它成为滚动容器，同时关闭html/body的默认滚动避免出现双滚动条：

1. 在全局CSS的@layer base中添加：

@layer base {
  html, body {
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
}

2. 修改你的外层div代码：

<div className="custom-scroll h-screen overflow-y-auto">
  {/* 原有页面内容 */}
</div>

方案2：使用Tailwind滚动条插件 #

1. 安装插件：

npm install tailwind-scrollbar

2. 在tailwind.config.js中注册插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他原有配置
  plugins: [require('tailwind-scrollbar')],
}

3. 同样按方案1的要求关闭html/body默认滚动后，给外层div添加类即可：

<div className="h-screen overflow-y-auto scrollbar scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-gray-100">
  {/* 原有页面内容 */}
</div>

常见问题排查 #

• 自定义样式不生效：确保样式写在@layer规则内，避免被Tailwind默认优先级覆盖
• 出现双滚动条：检查是否已经关闭html/body的默认overflow规则
• 火狐浏览器不生效：确保添加了scrollbar-width和scrollbar-color兼容属性

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