Tailwind Grid表单每行两输入，网格未占满视口求助

我是Tailwind CSS新手，尝试使用Grid布局创建每行包含两个各占半行宽度的表单输入，但网格无法占满整个视口。

问题原因 #

你的Grid布局未占满视口，核心问题出在容器层级的宽度继承上：

• 外层Grid容器设置了w-full，但内部的<form>和<div id="form">没有继承这个宽度，导致Grid列的可用宽度被限制
• 表单元素（select/input）默认没有占满父容器宽度，进一步缩小了视觉上的宽度

解决方案 #

通过以下调整让布局占满视口：

1. 给<form>和内部的<div id="form">添加w-full类，确保它们撑满外层Grid容器
2. 给所有select和input组件添加w-full类，让表单元素占满所在Grid列的宽度
3. 若追求更直观的每行两列布局，也可以将外层Grid的grid-cols-6改为grid-cols-2，同时把col-span-3改为col-span-1，效果一致

修改后的代码 #

CSS 部分 #

.as-console-wrapper { display: none !important; } /* 隐藏Tailwind生产环境警告 */

HTML 部分 #

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid w-full grid-cols-6 gap-2 bg-white px-4 py-5 sm:p-6">
  <form name="form" method="post" class="w-full">
    <div id="form" class="w-full">
      <div class="col-span-3 border">
        <label class="label-text required text-sm font-medium text-gray-700" for="form_lang">Website Language</label>
        <select id="form_lang" name="form[lang]" class="select select-primary input-bordered mt-1 w-full">
          <option value="English">English</option>
          <option value="French">French</option>
        </select>
      </div>
      <div class="col-span-3 border">
        <label class="label-text required text-sm font-medium text-gray-700" for="form_siteUrl">Site URL</label>
        <input type="text" id="form_siteUrl" name="form[siteUrl]" required="required" class="input input-bordered input-primary input-bordered mt-1 w-full" inputmode="url" value="chum.test" />
      </div>

      <div class="col-span-3 border">
        <label class="label-text required text-sm font-medium text-gray-700" for="form_tagLine">Catchy Tagline</label>
        <input type="text" id="form_tagLine" name="form[tagLine]" required="required" class="input input-bordered input-primary input-bordered mt-1 w-full" value="Lets Enjoy" />
      </div>

      <div class="col-span-3 border">
        <label class="label-text required text-sm font-medium text-gray-700" for="form_siteName">Awesome Site Name</label>
        <input type="text" id="form_siteName" name="form[siteName]" required="required" class="input input-bordered input-primary input-bordered mt-1 w-full" value="My Network" />
      </div>

      <div class="col-span-3 border">
        <label class="label-text required text-sm font-medium text-gray-700" for="form_rootPath">Installation Root Path</label>
        <input type="text" id="form_rootPath" name="form[rootPath]" required="required" class="input input-bordered input-primary input-bordered mt-1 w-full" value="C:\\laragon\\www\\chum\\" />
      </div>

      <div class="col-span-6 border">
        <button type="submit" id="form_save" name="form[save]" class="btn btn-primary">Setup Network</button>
      </div>
    </div>
  </form>
</div>

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