Tailwind CSS中input输入框无法占满宽度的问题咨询

核心原因 #

• input是替换型内联块元素，默认宽度由自身内容或浏览器默认尺寸决定，不会像div这类块级元素一样自动占满父容器。
• div属于块级元素，默认样式里宽度为100%，所以能自动填满父容器的可用宽度。

解决方法 #

直接给input添加Tailwind的w-full类，强制让它继承父容器的宽度：

<div class="flex flex-col md:flex-row md:items-center md:justify-between">
  <div class="flex flex-row items-center">
    <div class="icon">ICON</div>
    <div class="brand">BRAND</div>
  </div>
  <div class="flex grow">
    <span class="relative flex w-full items-center bg-green-200 p-4">
      <label for="search"></label>
      <div class="icon absolute">ICON</div>
      <input placeholder="WHY NOT FULL WIDTH FOR THIS INPUT BOX?????" class="w-full" />
    </span>
  </div>
  <div class="flex flex-row">SECTION-2</div>
</div>

额外优化提示 #

因为搜索图标是绝对定位，会覆盖input的左侧内容，建议给input添加左侧内边距，比如pl-10，避免输入内容和图标重叠：

<input placeholder="WHY NOT FULL WIDTH FOR THIS INPUT BOX?????" class="w-full pl-10" />

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