Search code examples
reactjsnext.jstailwind-csstailwind-in-js

How to prevent Tailwind from changing a text input field's border when it's focused on?


I recently upgraded the Tailwind version in my Next.js application and, as a result, a few things became wonky. I noticed that for input fields with the type="text" attribute, their border now changes to a different color -- which I never assigned -- when they're focused on. Prior to upgrading Tailwind, the border color remained the same when text input fields were hovered and focused on. Interestingly, this doesn't happen to any of my other form fields that don't include the type="text" attribute. I'd very much appreciate it if someone could explain why this might be happening & how I could fix this.

Here's an image of a text input field when it's hovered on: Text Input Field While Hovered On (Intended)

Here's an image of that text input field when it's focused on: Text Input Field While Focused On (Unintended)


Solution

  • Turns out all I needed to do was remove the tailwindcss/forms plugin I included in my tailwind.config.js.