Angular mat-form-field not working properly - A border line appears inside the field

Question

While implementing the angular's material library to make form fields and form fields I am getting this unsual ui issue, where when implemented, a line appears in the form field which should not happen.

UI specifications:

1. TailwindCSS
2. DaisyUI (Component library)
3. Angular Material

Following is the code that I have written:

<form
        [formGroup]="UserSignUp"
        (ngSubmit)="submitForm()"
        id="sign-in-form"
        onsubmit="return false"
        novalidate
      >
        <div class="form-control w-full">
          <label class="label">
            <span class="label-text font-semibold text-lg">Email</span>
          </label>
          <mat-form-field appearance="outline">
            <mat-label> Email </mat-label>
            <input
              formControlName="email"
              placeholder="Enter your email..."
              [(ngModel)]="obj.email"
              matInput
            />
          </mat-form-field>
          <mat-error
            class="mt-1"
            *ngIf="isSubmitted && errorControl['email'].errors?.['required']"
          >
            Email is required
          </mat-error>
          <mat-error
            class="mt-1"
            *ngIf="isSubmitted && errorControl['email'].errors?.['pattern']"
          >
            Invalid Email structure
          </mat-error>
        </div>
        <a routerLink="/dashboard">
          <button class="bg-primary text-white py-3 w-full rounded-lg">
            Sign Up
          </button>
        </a>
</form>

app.module.ts:

  imports: [
    BrowserModule,
    AppRoutingModule,
    MatIconModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],

What is showing: This the result that is showing, as you can see there is a red line inside the form-field deviding the field into two sections

What should be showing: This is the image taken from official docs. As you can see that there is no inner line inside the form-field

Answer 1

This is due to a conflict with the style in TailwindCSS and the angular material.

Add this to your style.scss to solve this issue

.mdc-notched-outline__notch
{
  border-right: none;
}