Tailwind CSS(Daisy UI)中TextArea文本超高度后无法调整尺寸问题

在React应用中基于Tailwind CSS（搭配DaisyUI组件类）实现可纵向调整尺寸的TextArea组件，开启resize-y调整功能后，当文本内容超出TextArea高度时，无法拖拽调整组件尺寸。

相关代码如下：

• TextArea组件代码：

<div className='form-control w-full'>
  <label className='label'>
    <span className='label-text text-primary'>{title}</span>
  </label>
  <textarea
    placeholder={placeholder}
    className={`textarea w-full resize-y ${
      value !== text ? 'bg-green-100' : 'bg-white'
    }`}
    value={text}
    onChange={(e) => {
      setText(e.target.value);
      debounced(e.target.value);
    }}
  />
</div>

• 组件外层包裹代码：

<div className="flex flex-row flex-wrap">
  {descriptions.map((field: CollapsibleInputField, i: number) => (
    <div
      key={i}
      className={
        field.placeholder === "English" ? "w-full pr-2" : "w-1/2 pr-2"
      }
    >
      <TextAreaContainer
        id={field.id}
        value={field.data}
        placeholder={field.placeholder}
        title={field.title}
      />
    </div>
  ))}
</div>

问题现象：

• 文本未超出TextArea高度时，可正常拖拽调整尺寸：
  
• 文本超出TextArea高度后，拖拽手柄失效无法调整尺寸：
  

故障核心原因是TextArea的溢出样式未显式声明：
你使用的DaisyUI预设.textarea类对溢出属性的默认设置，在内容未溢出时不会影响右下角原生resize拖拽手柄的交互；但当文本高度超出TextArea当前高度时，未明确规则的溢出属性会让滚动条直接覆盖resize手柄的可点击区域，加上外层flex布局的宽度约束，最终导致完全无法触发拖拽。外层flex布局的边距设置不是故障原因，不需要改动。

给TextArea类名新增两个属性即可解决：

• 添加overflow-auto：明确指定内容溢出时自动显示滚动条，保证原生resize手柄始终固定在滚动条底部的可交互位置，不会被溢出内容或滚动条遮挡
• 可按需添加min-h-[100px]（数值可根据业务需求调整）：设置TextArea的最小初始高度，避免初始高度过小导致输入少量内容就触发溢出

修改后的TextArea核心代码如下：

<textarea
  placeholder={placeholder}
  className={`textarea w-full resize-y overflow-auto min-h-[100px] ${
    value !== text ? 'bg-green-100' : 'bg-white'
  }`}
  value={text}
  onChange={(e) => {
    setText(e.target.value);
    debounced(e.target.value);
  }}
/>

如果遇到极端场景下手柄热区太小不好点击，可以通过给TextArea加内边距的方式进一步扩大拖拽热区，绝大多数场景下添加overflow-auto即可完全修复故障。

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