Next.js+Tailwind登录表单选择Chrome自动填充邮箱时输入框变白如何解决？

Chrome对自动填充的输入框会应用默认的:-webkit-autofill伪类样式，优先级很高，会覆盖自定义背景色，单纯添加focus样式无法解决——因为autofill状态的样式权重更高。以下是几种可行的解决方法：

方法1：自定义Tailwind变体处理autofill伪类 #

先在tailwind.config.js中添加自定义变体，让Tailwind支持autofill状态的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['autofill'],
      textColor: ['autofill'],
      borderColor: ['autofill'], // 需要自定义边框色时添加
    },
  },
  plugins: [
    ({ addVariant }) => {
      addVariant('autofill', '&:-webkit-autofill');
    },
  ],
}

之后在输入框组件中直接使用autofill:前缀的样式，覆盖Chrome默认值：

<input
  type="email"
  placeholder="邮箱"
  className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-900 
             autofill:bg-gray-50 autofill:text-gray-900 autofill:border-gray-300
             focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>

方法2：用内阴影模拟背景色（无需修改配置） #

如果不想修改Tailwind配置，可以用inset内阴影覆盖Chrome自动填充的白色背景——阴影层级高于autofill的背景色：

<input
  type="email"
  placeholder="邮箱"
  className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-900
             shadow-[inset_0_0_0_1000px_rgb(249,250,251)] // 对应bg-gray-50的色值
             focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>

注意阴影颜色要和输入框背景色一致，比如bg-gray-50对应rgb(249,250,251)，可根据需求替换成其他颜色的RGB值。

补充说明 #

• 若要处理自动填充时的focus状态，可追加autofill:focus:前缀的样式，比如autofill:focus:ring-blue-500，确保focus状态样式正常。
• 尽量避免用autocomplete="off"禁用自动填充，这会降低用户体验，且Chrome有时会忽略该属性；密码框可使用autocomplete="new-password"配合样式处理。

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