React 中的 TailWindCSS 输入字段更改

Question

我有个问题

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

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

有人可以帮忙吗？谢谢

Answer 1

我在 Chrome/Webkit 浏览器中的自动填充方面遇到问题。感谢这篇 CSS 技巧文章，我能够通过将其添加到我的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伪类，但我发现这没有帮助：

@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;
}

https://tailwindcss.com/docs/hover-focus-and-other-states#autofill

在这里，我将它与“重要修饰符”结合起来：https://tailwindcss.com/docs/configuration#important-modifier