如何防止 Tailwind 在聚焦时更改文本输入字段的边框？
How to prevent Tailwind from changing a text input field's border when it's focused on?
我最近在我的 Next.js 应用程序中升级了 Tailwind 版本，因此，一些事情变得不稳定。我注意到对于具有 type="text" 属性的输入字段，当它们被聚焦时，它们的边框现在会更改为不同的颜色——我从未分配过这种颜色。在升级 Tailwind 之前，当文本输入字段悬停并聚焦时，边框颜色保持不变。有趣的是，这不会发生在我的任何其他不包含 type="text" 属性的表单字段中。如果有人能解释为什么会发生这种情况以及我该如何解决这个问题，我将不胜感激。
这是将鼠标悬停在以下位置时的文本输入字段的图像：
Text Input Field While Hovered On (Intended)
这是文本输入字段聚焦时的图像：
Text Input Field While Focused On (Unintended)
原来我需要做的就是删除我在 tailwind.config.js.
中包含的 tailwindcss/forms 插件
据我所知，表单插件在输入框周围放置了边框和圆环 属性。
您可以通过设置 focus:ring-0 并使用 focus:border-none 覆盖边框颜色来移除蓝色默认环，或者您可以将它们替换为您选择的颜色。
我最近在我的 Next.js 应用程序中升级了 Tailwind 版本，因此，一些事情变得不稳定。我注意到对于具有 type="text" 属性的输入字段，当它们被聚焦时，它们的边框现在会更改为不同的颜色——我从未分配过这种颜色。在升级 Tailwind 之前，当文本输入字段悬停并聚焦时，边框颜色保持不变。有趣的是，这不会发生在我的任何其他不包含 type="text" 属性的表单字段中。如果有人能解释为什么会发生这种情况以及我该如何解决这个问题，我将不胜感激。
这是将鼠标悬停在以下位置时的文本输入字段的图像： Text Input Field While Hovered On (Intended)
这是文本输入字段聚焦时的图像： Text Input Field While Focused On (Unintended)
原来我需要做的就是删除我在 tailwind.config.js.
中包含的 tailwindcss/forms 插件据我所知，表单插件在输入框周围放置了边框和圆环 属性。
您可以通过设置 focus:ring-0 并使用 focus:border-none 覆盖边框颜色来移除蓝色默认环，或者您可以将它们替换为您选择的颜色。