2

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)

Roger Cooper
  • 178
  • 2
  • 19
  • What version did you upgrade from? It's generally good practice to have a visual representation when a field is focused, and most modern browsers even have default styles for this. To prevent the default styling (whether it's browser or Tailwind based), take a look at what CSS properties the input has when it's in focus and set it to something you prefer. – j1mbl3s Jun 11 '21 at 23:01
  • @j1mbl3s I upgraded to version 2.1.4 from 1.9. I ended up looking at the Styles tab in Chrome & discovered that there were some classes associated with items with the type="input" attribute in the tailwind.css file that were causing the unintended color change and the file's located in the node_modules folder. How can I disable these classes without changing the file itself? Is it something I can do in my tailwind.config.js file? – Roger Cooper Jun 11 '21 at 23:24
  • I don't think this is possible in tailwind.config.js without removing some Tailwind layer, however you could try adding something like this in your CSS: `*:focus { thePropertyApplyingTheBorder: 'theValueYouWant'; }` or something similar. – j1mbl3s Jun 12 '21 at 00:35
  • @j1mbl3s Hmm, that's unfortunate to hear. Just to clarify, what's that asterisk before the colon for in `*:focus { thePropertyApplyingTheBorder: 'theValueYouWant'; }`? I noticed that in the tailwind.css file, it was the asterisk `* {}` class that applied the styling that I'm trying to void. In tailwind.css, I believe the * signifies box shadow. – Roger Cooper Jun 12 '21 at 00:56
  • The `*` selector is the wildcard selector. Essentially, `*:focus` selects anything with the `:focus` pseudo-class – j1mbl3s Jun 12 '21 at 01:07
  • @j1mbl3s Ah, gotcha -- thanks! I ended up resolving this issue by removing the tailwindcss/forms plugin I included in my tailwind.config.js. – Roger Cooper Jun 12 '21 at 01:11

4 Answers4

7

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

Roger Cooper
  • 178
  • 2
  • 19
  • Allthough, problem is not entirely solved. Zooming in on the component, I can see that the Tailwind forms plugin adds a second blue border when focused , in addition your own colored focus border. I can't figure out what is causing it though :\. For now I disable the forms plugin like you do, but I'd actually like to use the forms plugin in the long run, so would be nice if someone know whats going on. – Solsiden Oct 19 '21 at 15:45
  • 1
    Set focus:ring-0 and focus:border-none to get rid of the colors. Or add your own colors if you want :) – EdvinTr Jan 01 '22 at 16:32
1

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.

EdvinTr
  • 152
  • 3
  • 3
0

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

Liyu Mesfin
  • 11
  • 1
0

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
James Kaguru Kihuha
  • 253
  • 3
  • 9