Tailwind CSS break-word在React输入框中失效，如何解决？

当前React输入框输入文本时只会横向延伸，无法自动换行到下一行，对应的代码如下：

<input className="bg-slate-50 text-main-blue border border-gray-300 drop-shadow-lg text-sm rounded-md my-5 block w-full p-2.5 whitespace-normal word-break:break-word" type="text" name="eventName" placeholder="Event Name" required onChange={event => setEventName(event.target.value)} value={eventName}/>

解决方法 #

核心问题在于 <input type="text"> 是单行输入控件，原生不支持多行换行，靠CSS样式无法解决这个问题。直接改用 <textarea> 组件即可，它原生支持多行输入和自动换行，同时能保留原有逻辑和样式：

修改后的代码：

<textarea 
  className="bg-slate-50 text-main-blue border border-gray-300 drop-shadow-lg text-sm rounded-md my-5 block w-full p-2.5 whitespace-normal break-words"
  name="eventName" 
  placeholder="Event Name" 
  required 
  rows={3}
  onChange={event => setEventName(event.target.value)} 
  value={eventName}
/>

关键修改点 #

• 替换 <input> 为 <textarea> 标签
• 移除 type="text" 属性（textarea不需要该属性）
• 添加 rows={3} 控制初始显示的行数（可根据需求调整数值）
• 把原样式里的 word-break:break-word 改成Tailwind的 break-words 类（原写法不符合Tailwind语法，不会生效）

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