Tailwind snap-mandatory在Next.js项目中无法正常工作

我搭建了一个简易图片画廊项目，发现滚动snap功能完全失效。一开始以为是项目中导入的某些代码覆盖了相关变量，于是用 pnpm create next-app 全选所有选项创建了一个全新的测试项目，结果问题依然存在。检查浏览器开发者工具时，发现 snap-mandatory 样式被划掉，搜遍全网也没找到解决办法。

后来找到了解决方案：直接在全局样式文件（比如项目里的 index.css）中为滚动容器添加 scroll-snap-type: mandatory 相关样式，确保样式优先级足够，不会被默认样式覆盖。

示例代码：

/* index.css 中添加 */
.image-gallery {
  scroll-snap-type: x mandatory; /* 根据滚动方向选择x或y */
  overflow-x: auto; /* 开启对应方向的滚动 */
  display: flex;
}

.gallery-image {
  scroll-snap-align: center; /* 或start/end，根据需求调整 */
  flex-shrink: 0;
  width: 100%;
  height: 80vh;
}

核心是要把snap相关样式写在全局样式文件中，保证它能正确作用到目标容器上，避免被局部样式或框架默认样式覆盖。

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