How can I disable the ring shadow with TailwindCSS?

This is how my problem looks like (see the ring) :

View Image

Using the Chrome's inspector found that it is related to --tw-ring-shadow. So I tried adding classes like ring-0 and ring-offset-0 (as you can see below) but it didn't work!!

    import { TextField } from "@mui/material";
    
    
    function ContactForm(): JSX.Element {
      return (
        <div className="form-container pt-12 flex flex-col items-center">
          <div className="input-row">
            <TextField
              className="ring-offset-0 ring-0"
              label="First Name"
              variant="outlined"
            />
          </div>
        </div>
      );
    }
    
    export default ContactForm;

Do you have any idea for how can I get rid of this annoying border that overlaps the input field??

I'd appreciate your help!

You could try overriding the Tailwind CSS variable for input fields by adding the following in your application's CSS:

input {
  --tw-ring-shadow: 0 0 #000 !important;
}

Alternatively...we can't see the code generated by <Textfield> to ensure that your Tailwind utility classes are being applied correctly to the input element, but if they are not, you could try targeting the <input> field directly using @apply in your CSS file:

input {
  @apply ring-offset-0 ring-0
}