Tailwind CSS：Chrome自动填充时输入框文本颜色异常问题

核心思路 #

Chrome的自动填充机制会强制覆盖输入框的文本颜色和背景色，硬编码颜色值的方案无法适配不同样式的输入框。我们可以通过继承输入框本身的样式属性实现通用适配，无需固定颜色值。

通用解决方案 #

修改全局CSS文件（如app.css），替换之前硬编码的样式为以下代码：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /* 继承输入框原有背景色，覆盖Chrome自动填充的默认黄色背景 */
  -webkit-box-shadow: 0 0 0px 1000px inherit inset !important;
  /* 继承输入框原有文本颜色 */
  -webkit-text-fill-color: inherit !important;
  /* 延迟Chrome自动填充背景色的生效时间，避免默认黄色闪现 */
  transition: background-color 5000s ease-in-out 0s;
}

方案优势 #

• inherit关键字让自动填充状态下的输入框直接继承自身原本的文本和背景样式，不管你用了text-gray-600、text-blue-500还是其他Tailwind文本颜色类，都能自动适配。
• 超长延迟的transition属性能彻底规避Chrome默认的自动填充黄色背景闪现问题。

额外优化：Tailwind自定义工具类（可选） #

如果不需要全局生效，只想针对特定输入框处理，可以在tailwind.config.js中添加自定义工具类：

module.exports = {
  // ...其他配置项
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.autofill-fix': {
          '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus': {
            '-webkit-box-shadow': '0 0 0px 1000px inherit inset !important',
            '-webkit-text-fill-color': 'inherit !important',
            'transition': 'background-color 5000s ease-in-out 0s',
          }
        }
      })
    }
  ],
}

之后在需要的输入框上添加autofill-fix类即可：

<input type="text" id="calle" name="direccion[calle]" required class="autofill-fix w-11/12 mx-auto rounded-md border-gray-400 focus:ring-0 focus:border-green-800 h-10 pt-3 overflow-hidden my-1 text-gray-600 text-lg">

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