How can I disable the ring shadow with TailwindCSS?

Question

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!

Answer 1

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
}