如何用TailwindCSS限制页面最小宽度，防止过度缩小？

你当前代码里给hero-section加的min-w-0是帮倒忙的——这个类会强制把元素最小宽度重置为0，这就是页面能缩到极窄的核心原因之一。

修复步骤： #

1. 替换错误的最小宽度类
   删掉min-w-0，换成你需要的最小宽度类：

   • 用Tailwind预设值：比如min-w-xs（对应320px）、min-w-sm（对应640px），直接满足常见移动端最小宽度需求；
   • 自定义精确宽度：用min-w-[320px]（把320px换成你不想再缩小的临界宽度）。

   修改后的section标签：

   <section id="hero-section" class="bg-blue-100 text-white min-w-[320px]">
   

2. 确保根容器也做限制
   单独给section加限制可能没效果，因为页面的最小宽度由最外层的根元素（比如body或App的包裹div）决定。可以：

   • 在全局样式里添加：

     body {
       min-width: 320px; /* 和你设置的临界值一致 */
       overflow-x: hidden; /* 避免内容横向溢出出现滚动条 */
     }
     

   • 或者给根容器直接加Tailwind类：min-w-[320px] overflow-x-hidden

3. 优化内部元素避免溢出
   你按钮上的px-20在窄屏会导致按钮过宽超出容器，建议给按钮加max-w-full，确保它不会超出父容器宽度：

   <button
     className="px-20 xs:px-5 py-2 bg-indigo-500 border border-indigo-500 rounded-sm hover:bg-indigo-600 hover:border-indigo-600 max-w-full"
     onClick={() => history("/register")}
   >
     Create an account
   </button>
   

内容的提问来源于stack exchange，提问作者Paul Nicholas Chinnam