CODEWITHSUNDEEP
cssreactjsmaterial-uitailwind-cssinput-field
Enadot
Enadot

Reputation: 195

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!

Upvotes: 13

Views: 12184

Answers (2)

Nacef racheh
Nacef racheh

Reputation: 31

Try adding focus: before your classes like this:

<TextField 
className="focus:ring-offset-0 focus:ring-0" 
label="First Name" 
variant="outlined" />

This change makes sure that the styles 'ring-offset-0' and 'ring-0' are applied when you click on the input field.

Upvotes: 3

Ed Lucas
Ed Lucas

Reputation: 7355

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
}

Upvotes: 21

Related Questions