必须用textarea+JavaScript动态计算高度，因min-h/max-h仅设静态边界，无法响应内容变化；需先重置height为auto再读scrollHeight，并处理iOS偏差、插件覆盖及flex布局干扰。
必须用 textarea + JavaScript 动态计算高度，input[type="text"] 根本做不到——它不换行、不撑高、回车就提交，所有“自适应” hack 都在模拟失败边缘反复横跳。
为什么不能直接用 Tailwind 的 min-h / max-h 类搞定
Tailwind 的 min-h-[40px] 或 max-h-[200px] 只控制初始边界，不响应内容变化。用户打 10 行字后，textarea 还卡在 min-h 高度里，文字被截或触发内部滚动——这不是自适应，是“假装能伸”。真正自适应必须靠 JS 读取 scrollHeight 并同步设 style.height。
-
scrollHeight是内容实际所需高度（含内边距），但 iOS Safari 会多算 2–4px，得手动减去parseInt(getComputedStyle(el).paddingTop)才准 - 必须先设
el.style.height = "auto"再读scrollHeight，否则旧高度缓存会导致值滞后 - 如果用了
@tailwindcss/forms插件，它默认重置padding和resize，但某些版本会把min-height覆盖成0，导致首屏塌陷——检查生成的 CSS 是否有min-height: 0
React 中用 useRef + useEffect 同步高度的实操要点
别用 useState 存高度再 set，那会触发多余重渲染；直接操作 DOM 节点最轻量。
- 用
useRef拿到textarea实例，在useEffect里初始化一次高度（避免首屏空白过高/过矮） - 监听
input事件，每次触发都执行：el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 200) + "px"（200是像素值，对应max-h-[200px]） - 别忘了在
componentWillUnmount或useEffect清理函数里重置height为""，否则服务端渲染（SSR）时 height 会被固化 - 如果父容器用了
flex布局，确保textarea不被flex-shrink: 0锁死——加flex-shrink-0反而会让它撑开布局
Tailwind 类名组合最容易翻车的三个地方
类名本身没问题，问题出在它们和 JS、插件、浏览器默认行为的交界处。
-
resize-none必须加，否则用户手动拖拽会破坏 JS 控制的高度逻辑 -
overflow-y-hidden要配min-h-[40px]和max-h-[200px]，三者缺一不可：前者藏滚动条，后两者定边界 - 如果项目启用了
@tailwindcss/forms，它的 base 层会把textarea的padding设为0.5rem，但你 JS 里没计入这个值，scrollHeight就会偏小——要么在 JS 里显式加回来，要么用class="p-3"覆盖插件默认
最常被忽略的是 iOS Safari 的 scrollHeight 偏差和 @tailwindcss/forms 对 min-height 的静默覆盖——这两个点不处理，90% 的“自适应”在真机上都会矮一截或突然跳高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
