Tailwind CSS移动端适配问题：屏幕<639px时右侧出现黑边

• 检查viewport meta标签
  确保HTML头部添加正确的移动端视口配置，这是适配的核心前提：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  缺失这个标签会导致浏览器沿用桌面端缩放逻辑，极易引发溢出问题。

• 定位溢出的子元素
  黑边本质是某个子元素宽度超出了视口范围，可通过以下方式排查：

  • 给可疑元素临时添加border-red-500类，直观定位溢出元素；
  • 替换固定宽度（如w-[400px]）为相对宽度（如w-full），或用max-w-full限制元素最大宽度不超过父容器；
  • 避免滥用w-screen，该类会匹配设备屏幕宽度，但部分设备的实际可视区域会小于屏幕宽度（如带刘海的机型）。

• 全局层面锁定溢出
  仅给body设置溢出隐藏可能不够，需同时给html标签添加相关样式，覆盖全局滚动行为：

  <html class="w-full h-full m-0 p-0 overflow-x-hidden">
  <body class="w-full h-full m-0 p-0 overflow-x-hidden">
  

• 排查布局组件的宽度问题

  • 若使用container类，检查其在移动端是否有默认的padding/margin导致溢出，可自定义容器的响应式样式；
  • 对于flex/grid布局，确保子元素未设置flex-shrink: 0（对应Tailwind的flex-shrink-0）导致无法自适应收缩，同时调整小屏设备的网格列数，避免总宽度超出视口。

• 适配内容尺寸
  调整小屏设备的内容大小，比如用text-sm替代较大字体、给图片添加max-w-full h-auto确保图片自适应容器宽度，避免内容挤压出横向空间。

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