tailwind需手动组合实用类实现专业表单样式：为input[type="text"]添加px-3 py-2 border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none transition-colors，textarea须用resize-none+js动态设height，错误态需aria-invalid="true"与视觉样式同步，禁用态须显式声明disabled:opacity-70。
Tailwind 没有 form-control 这类抽象类，所有输入框样式都靠组合实用类实现——想让 input 或 textarea 看起来专业、可用、可访问，必须手动拼出边框、聚焦态、禁用态、错误反馈等细节。
怎么给 input[type="text"] 加基础可用样式
只加 border 和 rounded 是不够的；缺了聚焦反馈，用户不知道当前焦点在哪，尤其在键盘操作时容易迷失。
-
px-3 py-2提供呼吸感，避免文字贴边 -
border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent是关键组合：环形聚焦比单纯改边框色更醒目，且避免双线叠加 -
focus:outline-none必须加，否则 Chrome/Firefox 默认 outline 会和 ring 冲突 - 别漏
transition-colors，否则 focus 状态切换生硬 - 如果用了
@tailwindcss/forms插件，它可能重置padding或min-height，建议显式写py-2覆盖
textarea 自适应高度为什么不能用 input
因为 input[type="text"] 是单行元素，CSS 的 height、min-height、resize 对它无效；敲回车不会换行，而是提交或失焦；所有“撑高 input”的 hack 都不可靠。
- 必须用
textarea作为基础容器 - 加
resize-none去掉拖拽手柄，再用 JS 动态设style.height - JS 逻辑必须是：
el.style.height = "auto"; el.style.height = el.scrollHeight + "px"—— 先重置再读，否则scrollHeight滞后 - iOS Safari 的
scrollHeight偏小，建议加+ 2容错 - Tailwind 类里别混用
h-10和动态 height，会冲突跳变
错误态和禁用态不能只靠颜色
只加 border-red-500 或 opacity-70 是视觉欺骗；屏幕阅读器无法感知，键盘用户也看不出为何点不动。
- 错误态要同时设：
border-red-500 focus:ring-red-500+aria-invalid="true" - 禁用态加
disabled:opacity-70 disabled:cursor-not-allowed，否则鼠标悬停无反馈，点击无响应还看不出原因 - 如果用了自定义下拉（
select），记得加appearance-none并手动补图标，否则各浏览器箭头位置不一致 -
@tailwindcss/forms插件有时会覆盖disabled样式，建议用disabled:opacity-70显式声明
真正难的不是写对那几行 class，而是处理不同浏览器对 scrollHeight 的偏差、粘贴大段文本时的计算时机、以及光标在换行边缘的渲染错位——这些细节没被测到，上线后就会变成“偶尔输着输着框就塌了”这类问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
