必须使用 textarea + JavaScript 动态计算高度，而非 input[type="text"]；因 input 天生单行、不支持自动换行与垂直伸展，所有 hack 均不可靠；textarea 需禁用 resize、监听 input 事件并重置 height 后读取 scrollHeight，配合 min-h/max-h 控制边界，注意 Tailwind 插件干扰及 iOS Safari 的 scrollHeight 偏差。
直接用 textarea + JavaScript 动态计算高度，别试图用 input[type="text"] 强行撑高——它天生不支持多行内容自动扩展，硬改只会触发水平滚动或截断。
为什么不能用 input[type="text"] 实现自适应高度
标准 input 是单行元素，CSS 的 height、min-height 或 resize 对它无效；设置 white-space: pre-wrap 或 word-break 也改变不了换行行为。用户敲回车时，它根本不会换行，而是提交表单或失去焦点。
-
input溢出时默认横向滚动，无法触发垂直伸展 - 即使加了
rows属性，它也不识别（该属性只对textarea有效） - 所有“让 input 自动增高”的 hack 都依赖监听
input事件 + 手动测量文本宽度，但无法准确模拟换行逻辑，极易在长单词、中文、emoji 场景下错位
textarea + resize: none + 动态高度计算是唯一可靠路径
必须用 textarea 作为基础元素，禁用原生拖拽（resize: none），再通过 JS 测量其滚动高度并同步设置 style.height。Tailwind 本身不提供自动高度逻辑，得靠代码驱动。
- 初始渲染时设
min-h-[40px]和max-h-[200px]控制边界，避免无限拉伸 - 用
useRef（React）或querySelector（原生）拿到 DOM 节点，监听input事件 - 每次输入后执行：
el.style.height = "auto"; el.style.height = el.scrollHeight + "px"—— 先重置再读取，否则scrollHeight会滞后 - 记得在
componentDidMount或useEffect里初始化一次高度，避免首屏空白过高或过矮
Tailwind 类名组合要避开常见陷阱
Tailwind 默认会给 textarea 加 block 和 appearance-none，但某些版本的 @tailwindcss/forms 插件会覆盖 min-height 或重置 padding，导致高度计算偏移。
立即学习“前端免费学习笔记（深入）”；
- 显式写
min-h-[40px] max-h-[200px] overflow-hidden，不要依赖插件默认值 - 避免同时用
h-10和动态 height —— 冲突会导致样式跳变 - 如果用了
resize-none还能看到右下角小图标，检查是否漏写了appearance-none或被插件样式覆盖 - 移动端 iOS Safari 对
scrollHeight计算不准，建议加 2px 容错：el.scrollHeight + 2
真正难的不是写几行 JS，而是处理换行判定、光标位置变化、粘贴大段文本、以及不同浏览器对 scrollHeight 的微小差异——这些细节不处理，用户一粘贴就卡住或高度崩掉。
