如何用Tailwind CSS隐藏Next.js 14的全局滚动条？

你之前的方法对普通div有效但全局滚动条没反应，核心原因是全局滚动条属于<html>和<body>元素，而非layout/page组件的根容器。下面是两种可行方案：

方案一：直接在全局样式中锁定html/body（最可靠） #

修改app/globals.css，添加以下代码：

/* 隐藏全局滚动条，兼容所有主流浏览器 */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

这种方式不需要额外加工具类，直接作用于全局滚动条的载体元素，优先级最高，不会被组件样式覆盖。

方案二：用Tailwind工具类作用于html/body #

如果你坚持用自定义工具类，需要把类直接加到<html>和<body>标签上：

1. 保留你之前在globals.css或tailwind.config.js中定义的no-scrollbar工具类
2. 修改app/layout.js，给html和body添加类：

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className="no-scrollbar">
      <body className="no-scrollbar">{children}</body>
    </html>
  )
}

为什么之前的方法无效？ #

你之前把no-scrollbar加到了layout/page的子组件上（比如页面根div），但这些组件的滚动条是局部滚动条，而全局滚动条是由html/body元素生成的，两者不是同一个对象，所以样式不会生效。

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