React项目中Tailwind CSS输入框焦点边框颜色修改失效问题

你的问题出在浏览器默认的输入框焦点outline样式和Tailwind的默认焦点效果覆盖了你设置的border颜色。只需要在输入框的类名中添加focus:outline-none，就能让自定义的focus:border-teal-500生效。

修改后的输入框代码如下：

<input
  className="border-2 border-gray-500 p-2 rounded-md w-1/2 focus:outline-none focus:border-teal-500"
  type="text" 
  name="name" 
  placeholder='Enter Your Name' 
/>

原因说明 #

默认情况下，浏览器会给聚焦的输入框添加outline样式，部分Tailwind配置也可能附带ring类的焦点效果，这些视觉层级会高于你设置的border样式。添加focus:outline-none可以移除默认的outline，让自定义的border颜色在聚焦时正常显示。如果你的项目中还启用了Tailwind的ring焦点样式，还可以额外加上focus:ring-0来彻底清除默认焦点效果。

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