使用HTML与Tailwind CSS开发的页面移动端右侧多余空白如何解决？

• 同时给html和body两个根元素设置overflow-x: hidden，仅给body设置往往不会生效。在Tailwind中可直接给标签加类：<html class="overflow-x-hidden">、<body class="overflow-x-hidden">
• 排查所有容器元素的宽度设置，不要在全局使用固定像素宽度如w-[1200px]，替换为w-full max-w-[1200px]的组合实现适配
• 修复flex布局溢出问题：flex容器的子元素如果内容过宽默认不会收缩，给子元素加min-w-0类即可解决溢出
• 适配grid布局：移动端不要使用固定多列配置，替换为带断点的响应式配置如grid-cols-1 md:grid-cols-3，避免列总宽度超出视口
• 检查绝对定位元素：确认是否有left/right值设置不当导致元素超出视口，给对应父容器加relative类限制定位范围
• 处理长文本溢出：如果页面存在长英文、长链接没有自动折行，给对应文本容器加break-words类强制换行
• 快速定位问题元素：打开浏览器控制台的元素选择器，从外层到内层逐一选中元素，查看元素盒子模型的宽度是否超出视口宽度，直接定位异常元素修改

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