I've been using this trick in all of my Next.js projects and it works fine. This time it doesn't.

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 {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s !important; 
}

I honestly don't know why. The difference between this project and other projects is that this project has next-mdx and tailwind-typography.

However, I tried using the component (with that input field) outside mdx files but the border still persists.
Any ideas?