如何在TailwindCSS中设置height: fit-content适配子元素高度？

问题根源 #

当前代码中div高度无法贴合内部按钮，主要来自两方面原因：

• 你想要寻找的类似h-fit-content的类，在Tailwind中实际对应的简化工具类为h-fit，该命名采用了简写规则，直接搜索长关键词很难匹配到对应说明
• 外层<form>是flex flex-wrap布局容器，默认开启align-items: stretch规则，会让所有直接子元素在垂直方向被自动拉伸，占满所在行的全部可用高度，哪怕子元素本身只有按钮那么高。

具体修正方案 #

针对现有代码结构，只需要给提交按钮所在的div增加self-start类即可：

• self-start对应CSS的align-self: flex-start，可以让当前flex子项关闭父级的默认拉伸效果，按照自身内容的高度自然排布，完全适配内部button的高度
• 如果有强制锁定内容高度的需求，可以额外加上h-fit类做兜底，该类对应原生CSS的height: fit-content，从Tailwind v3开始内置可直接使用

修正后的完整代码 #

<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
     <textarea
          role="text-input"
          className="resize-none flex-1"
          placeholder="INPUT"
     />
     <textarea
          role="text-output"
          className="resize-none flex-1"
          placeholder="OUTPUT"
          readOnly
      />
      <div className="w-full flex flex-none self-start">
          <button>
                Submit!
          </button>
      </div>
</form>

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