TailwindCSS 固定宽度属性不适用于分辨率更改答案

【问题标题】：TailwindCSS fixed width property not working on resolution changeTailwindCSS 固定宽度属性不适用于分辨率更改
【发布时间】：2022-01-15 08:18:01
【问题描述】：

我有这个 div，它应该代表输入旁边的按钮。理想情况下，在分辨率更改时，输入元素的宽度会缩小，但按钮的高度和宽度保持不变。

<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
   <AddIcon></AddIcon>
   <div className="flex font-sans text-base font-medium">Add site</div>
</div>

我设置了w-28 属性，认为它可以实现这一点。但是，如果我缩小它出现的窗口或屏幕，按钮会改变宽度，我不知道为什么。

这是完整的组件：

<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
      <div id="settings-content" className="flex flex-col self-center mx-5">
        <div id="header" className="flex flex-col mt-5">
          <div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
        </div>
        <div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
        <div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
          <div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
            <AddIcon></AddIcon>
            <div className="flex font-sans text-base font-medium">Add site</div>
          </div>
          <input className="ml-5 flex-grow bg-red-500"></input>
        </div>
      </div>
    </div>

当两个单词应该在同一行时，这就是按钮在较小屏幕上的样子：

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

您可以尝试将whitespace-nowrap 添加到标签 div 以确保文本不会换行至两行。由于您将元素（按钮和输入）包装在另一个 flex 中，因此您可以将 shrink-0 添加到您的包装 div 以保持其大小。

例如：

<div id="block-site-add-list" className="flex flex-row ...">
  <div className="shrink-0 flex flex-row ...">
    <AddIcon></AddIcon>
    <div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
  </div>
  <input className="ml-5 grow bg-red-500"></input>
</div>

【讨论】：