使用 Tailwind，使行的宽度只与内容需要的一样宽

Question

我希望文本框占据几乎所有空间，而选择框只占据它需要的空间。目前，两行的宽度相同，选择不会占用该空间，至少在平板电脑模式下不会。我使用 Tailwind 来实现样式

 <div className="grid grid-flow-row auto-rows-max items-center  justify-items-center  space-y-5 p-25 mx-10">
   <div className=" col-span-2 md:col-span-1 w-52 ">
      <div>
        <select      
          className="bg-gray-50 border p-4 border-gray-300 text-gray-900 text-sm rounded-lg block w-full  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white "
        >
         <option>...</option>         
        </select>
      </div>
    </div>

     <div className="w-full col-span-1">
      <div>
        <input           
          type="text"
          value={title}
          placeholder="Title"
          className="border outline-none p-4 rounded-md w-full"
        ></input>
      </div>
    </div>
</div>

Answer 1

第一列的宽度为

w-52

（13rem），第二列你要占用剩余的空间。

为了实现这一点，我们需要设置

grid-template-columns: 13rem 1fr;

在 Tailwind 配置中，我们扩展了 gridTemplateColumns：

    extend: {
      gridTemplateColumns: {
        // Custom column configuration
        'give-away': '13rem 1fr',
      }
    },

然后我们可以使用

grid-cols-give-away

进行自定义列配置。第一列设置为

w-52

，第二列使用

w-full

.

<div className="grid grid-cols-give-away items-center justify-items-center space-y-5 p-25 mx-10">
   <div className="w-52">
      <div>
        <select      
          className="bg-gray-50 border p-4 border-gray-300 text-gray-900 text-sm rounded-lg block w-full  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white "
        >
         <option>...</option>         
        </select>
      </div>
    </div>

     <div className="w-full">
      <div className="">
        <input           
          type="text"
          value={title}
          placeholder="Title"
          className="border outline-none p-4 rounded-md w-full"
        ></input>
      </div>
    </div>
</div>

作为顺风游乐场查看： https://play.tailwindcss.com/ER6k4rviSb