reactjs - 如何防止 Tailwind 在聚焦时更改文本输入字段的边框？

Question

我最近在我的 Next.js 应用程序中升级了 Tailwind 版本，结果，一些事情变得不稳定。我注意到，对于具有该type="text"属性的输入字段，它们的边框现在变为不同的颜色——我从未指定过——当它们被关注时。在升级 Tailwind 之前，当文本输入字段悬停并聚焦时，边框颜色保持不变。有趣的是，这不会发生在我的任何其他不包含该type="text"属性的表单字段中。如果有人能解释为什么会发生这种情况以及我如何解决这个问题，我将非常感激。

这是悬停在文本输入字段上时的图像： 悬停时的 文本输入字段（预期）

这是该文本输入字段的图像，当它被聚焦时： Text Input Field While Focused On (Unintended)

Answer 1

原来我需要做的就是删除我在tailwind.config.js 中包含的tailwindcss/forms 插件。

Answer 2

据我所知，表单插件在输入周围放置了一个边框和环形属性。

focus:ring-0您可以通过设置和覆盖边框颜色来删除蓝色默认环，focus:border-none或者您可以用您选择的颜色替换它们。