如何解决Tailwind升级后文本输入框聚焦时边框异常变色问题

这一问题由Tailwind生态的版本迭代带来的默认样式变更导致：

1. 若你项目中安装了@tailwindcss/forms插件，v0.5.0及以上版本默认启用base策略，会全局给所有type="text"、type="email"等文本类表单输入框注入默认聚焦样式：自带未配置的蓝色outline和ring效果，优先级高于之前自定义的边框样式
2. 该默认规则仅作用于文本类输入框，不会覆盖按钮、下拉选择框、单选框等其他表单元素的样式，因此只有type="text"字段会出现异常
3. 若未安装该插件，则是升级到Tailwind CSS v3.4+版本后，新版内置的preflight重置规则新增了针对文本输入框的focus-visible默认样式，触发了异常表现

• 方案1：修改@tailwindcss/forms插件加载策略（全局生效，无侵入，推荐）
  在tailwind.config.js中将插件调整为class策略，调整后默认表单样式只会作用于主动添加了.form-input类名的输入框，不会全局生效：

  module.exports = {
    plugins: [
      require('@tailwindcss/forms')({ strategy: 'class' }),
    ],
  }
  

• 方案2：全局覆盖默认聚焦样式
  在项目全局CSS文件（通常为app/globals.css或pages/globals.css）中添加自定义规则，直接覆盖文本输入框的默认聚焦效果：

  @layer base {
    input[type="text"]:focus {
      outline: none;
      --tw-ring-opacity: 0;
      /* 替换为和hover状态一致的边框色即可 */
      border-color: #6b7280;
    }
  }
  

• 方案3：局部添加类名覆盖
  若仅需修复少量输入框，可直接在对应元素上添加Tailwind类名手动覆盖默认样式：

  <input 
    type="text" 
    className="focus:border-gray-500 focus:ring-0 focus:outline-none"
  />
  

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