CODEWITHSUNDEEP
reactjsnext.jstailwind-csstailwind-in-js
Roger Cooper
Roger Cooper

Reputation: 298

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)

Upvotes: 6

Views: 8435

Answers (5)

Divine
Divine

Reputation: 109

It's the browser which is adding an outline to the input field. Remove the outline by adding the class:

className="outline-none"

Upvotes: 2

James Kaguru Kihuha
James Kaguru Kihuha

Reputation: 543

Well turns out it not the border property that is being changed but the outline property. You can set the outline property when the input is on focus using outline. For example;

focus:outline-amber-200

Upvotes: 1

Liyu Mesfin
Liyu Mesfin

Reputation: 41

If you don't use "tailwindcss/forms" but still have it in tailwind config, delete it.

Upvotes: 3

EdvinTr
EdvinTr

Reputation: 342

The form plugin is placing a border and ring property around the input from what I can tell.

You can remove the blue default ring by setting focus:ring-0 and overriding the border color with focus:border-none or you can replace them with your color of choice.

Upvotes: 3

Roger Cooper
Roger Cooper

Reputation: 298

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

Upvotes: 14

Related Questions