必须使用 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 本身不提供自动高度逻辑，得靠代码驱动。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 初始渲染时设 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 的微小差异——这些细节不处理，用户一粘贴就卡住或高度崩掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！