我在Chrome/Webkit浏览器中遇到了自动填充的问题，多亏了this CSS tricks article，我才能通过将以下内容添加到我的globals.css中来修复它：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Change Autocomplete styles in Chrome*/
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 {
  border: 1px solid #253341;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #253341 inset;
  box-shadow: 0 0 0px 1000px #253341 inset;
  transition: background-color 5000s ease-in-out 0s;
  color: white;
}

从Tailwind 3开始，您还可以使用autofill伪类，但我没有发现这有什么帮助：

<input class="autofill:!bg-yellow-200 ..." />

https://tailwindcss.com/docs/hover-focus-and-other-states#autofill
在这里，我把它和“重要修饰语”结合起来：https://tailwindcss.com/docs/configuration#important-modifier

尝试使用 * 背景色 * 实用程序。
请参见此处https://tailwindcss.com/docs/background-color
例如，包含实用程序bg-red-900会将元素的背景色更改为暗红色。
下面将它应用于您的代码示例...

<input
  type="email"
  name="email"
  id=""
  className="bg-red-900 opacity-100 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline border-blue-300 "
  placeholder="Johnbull@example.com"
/>

结果就是...

我使它的工作与自动前缀所描述的顺风官方文件。
我们的想法是安装autoprefixer并将其添加到Tailwind插件中。你可以这样做：

npm install -D autoprefixer
# or
yarn add -D autoprefixer

添加到tailwind.config.js或您的PostCSS配置：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

然后，当您在Tailwind中编写autofill:something时，它将添加类似-webkit-autofill的规则。
要更改自动填充的背景色，实际上需要如下设置box-shadow：

autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)]

这将设置一个黄色的嵌入框阴影时，您的输入字段自动填充。