Unexpected blue border while typing text react-select

Question

There is an unexpected blue border when I type text. Please check the image. I tried editing control styles by setting border zero or none and even removed boxShadow. But nothing works. Please check the image.

control: (provided) => ({ ...provided, boxShadow: 'none', border: 0, }),

Answer 1

I found the issue. I was using one tailwind plugin tailwindcss-forms. It overrides the default behavior of some inputs. So there are 2 solutions to this.

1. Remove plugin from tailwind.congif.js file. Bascially remove this line require('@tailwindcss/forms').
2. If you want to keep this plugin. Add this into your parent css file. e.g. index.css. input[type='text']:focus { box-shadow: none; }