Next.js项目中Tailwind CSS平滑滚动仅移动端生效，桌面端失效求助

以下是几个针对该问题的可行解决方案，按优先级尝试：

1. 检查浏览器平滑滚动设置 #

桌面端Chrome/Edge默认可能关闭了平滑滚动功能，手动开启：

• Chrome：设置 → 外观 → 勾选「平滑滚动」
• Edge：设置 → 外观 → 找到「平滑滚动」并开启

2. 直接通过全局CSS强制设置 #

放弃Tailwind的scroll-smooth类，在globals.css中直接添加全局样式：

html {
  scroll-behavior: smooth !important;
}

这种方式优先级更高，能避免Tailwind类被意外覆盖的问题。

3. 在Tailwind配置中全局扩展滚动行为 #

修改tailwind.config.js，将平滑滚动设为全局默认：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      scrollBehavior: {
        smooth: 'smooth',
      },
    },
  },
  plugins: [],
}

之后再在html标签上保留scroll-smooth类即可。

4. 排除浏览器扩展干扰 #

部分性能优化、广告拦截类扩展会禁用页面平滑滚动，试试用浏览器的隐身模式打开页面测试，如果恢复正常，逐一排查已安装的扩展。

5. 验证锚点跳转的实现方式 #

如果你用Next.js的<Link>组件做锚点跳转，确保写法正确：

import Link from 'next/link';

// 正确写法
<Link href="#target-section">跳转到目标区域</Link>

// 对应目标元素
<div id="target-section">目标区域</div>

如果还是有问题，尝试用原生<a>标签测试，排除Next.js客户端导航的影响：

<a href="#target-section">跳转到目标区域</a>

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