React 中的 TailWindCSS 输入字段更改答案

【问题标题】：TailWindCSS input field change in ReactReact 中的 TailWindCSS 输入字段更改
【发布时间】：2023-04-03 19:00:01
【问题描述】：

我有一个问题

我有一个使用 Tailwindcss 进行样式设置的输入字段，如 https://codesandbox.io/s/tailwind-cra-forked-v0cx3?fontsize=14&hidenavigation=1&theme=dark

我在删除输入和自动填充中的背景时遇到问题。似乎没有任何效果。

有人可以帮忙吗？谢谢

【问题讨论】：

在你在codesandbox中提供的例子中，没有复选框...？
为您提供帮助，也许您还想具体描述一下您尝试过的操作以及为什么它似乎不适合您...
达诺兹。我不确定为什么复选框会出现在问题中。 ..我在发布这个问题之前解决了复选框问题。所以这就是我正在处理的事情。我似乎无法删除输入字段中自动填充的白色背景。它显示为白色。我需要删除背景。谢谢！
这有助于清理 Aurinko 湾...我在下面发布了一个可能的答案，如果您正在寻找，请告诉我...

标签： css reactjs

【解决方案1】：

尝试使用背景颜色实用程序。

请看这里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"
/>

这会导致...

【讨论】：

关闭 Danoz.. 我想通了 codesandbox.io/s/… 谢谢大家的帮助！
酷，很高兴你最终找到了解决方案。

【解决方案2】：

我在 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

【讨论】：