Tailwind CSS输入框聚焦过渡超出视口的解决方法及最佳实践

代码修改 #

调整输入框父容器和输入框的类，即可解决过渡时超出屏幕的问题：

<div class="flex justify-between">
  <span>Hello</span>
  <div class="flex gap-2">
      <div class="sm:mr-auto">
        <div class="relative max-w-full overflow-hidden">
          <input
            type="text"
            class="w-full rounded-md border border-slate-300/70 bg-white px-9 py-2 text-sm font-semibold text-black !outline-none transition-all duration-1000 ease-out placeholder:tracking-widest focus:max-w-96 focus:border-primary focus:ring-transparent sm:bg-transparent sm:pr-4"
            placeholder="Search..."
          />
        </div>
      </div>
    </div>
</div>

修改说明 #

1. 父容器添加max-w-full overflow-hidden：确保输入框的父容器始终在视口范围内，同时隐藏过渡过程中可能出现的溢出内容，避免元素超出屏幕。
2. 输入框替换focus:w-96为focus:max-w-96：固定宽度w-96会强制输入框在聚焦时变为24rem，当屏幕宽度不足时必然溢出；改用max-w-96后，输入框最多扩展到24rem，若屏幕空间不够则自适应父容器宽度，全程保持可见。

• 优先用max-width控制展开上限：避免使用固定w-*限制元素宽度，改用max-w-*让元素在可用空间内自适应，同时限制最大扩展尺寸，防止溢出。
• 给父容器设置溢出约束：对包含动态尺寸元素的父容器，添加overflow-hidden或overflow-x-hidden，确保子元素尺寸变化时不会破坏整体布局。
• 利用flex属性分配空间：给需要展开的元素添加flex-1，让它占据flex容器的剩余空间，配合max-w-*实现「能扩则扩、不超上限」的效果。
• 响应式适配不同屏幕：结合Tailwind的响应式前缀（如sm:、md:），为不同屏幕尺寸设置不同的最大宽度，比如小屏限制输入框为max-w-md，大屏放宽到max-w-96。
• 避免强制固定尺寸：尽量让元素宽度由内容或父容器决定，固定尺寸在多设备适配中极易出现溢出或布局错位问题。

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