TailWindCSS input field change in React

Question

I have a question

I have an input field using Tailwindcss for styling, as demonstrated in https://codesandbox.io/s/tailwind-cra-forked-v0cx3?fontsize=14&hidenavigation=1&theme=dark

I am having trouble with removing background in input and in autofill. nothing seems to work.

Can someone help, please? Thanks

Answer 1

I was having problems with autofill in Chrome/Webkit browsers. Thanks to this CSS tricks article, I was able to fix it by adding this to my globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #253341;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #253341 inset;
  box-shadow: 0 0 0px 1000px #253341 inset;
  transition: background-color 5000s ease-in-out 0s;
  color: white;
}

As of Tailwind 3, you can also use the autofill pseudo-class, but I didn't find this helpful:

<input class="autofill:!bg-yellow-200 ..." />

https://tailwindcss.com/docs/hover-focus-and-other-states#autofill

Here I'm combining it with the "Important Modifier": https://tailwindcss.com/docs/configuration#important-modifier