Tailwindcss / Material@19 forms styling conflict

[silk pewter]

Hello, as you can see in the screenshot attached, I'm having issues with the styling of the mat-form-field, whenever a label is added.

I am using the following packages:

[email protected]
@angular/[email protected]

Below you can see the code of the input field:

<mat-form-field class="w-full">
  <mat-label> Title </mat-label>
  <input matInput class="w-full" placeholder="e.g., Test test" />
</mat-form-field>

and my imports in the .ts file:

  imports: [
    ReactiveFormsModule,
    MatButtonModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
  ],

I have already tried fully removing w-full classes but this doesn't change anything.

I already tried flipping order of styles.scss, tailwind.css, and @angular/material/prebuilt-themes/cyan-orange.css in angular.json but unfortunately to no avail. I am using prebuilt Cyan Orange theme from official Angular material website.

When tailwindcss is completely removed from angular.json in styles array, then the issue is non-existent.

Any help would be appreciated, thank you in advance!

[silk pewter]

I isolated the issue and traced it back to a specific rule in tailwindcss/base.css:

* {
  border-style: solid;
}

I've been trying for a good while to remove this rule, but it's not as easy as it seems. You can't override it by setting it to unset w/ an important. Tried a few different things like deleting the rule using packages and whatnot, but unforutnately to no avail yet.

I understand the issue is super niche, but if anyone has a solution I'd be happy to hear about it!

[silk pewter]

After spending hours of my life on this, I have decided to just not use tailwind base.scss. I am only using it for the utilitiarian classes anyway. This can be achieved very simply by altering your tailwind.css like so:

/* @tailwind base; comment out or remove completely */ 
@tailwind components;
@tailwind utilities;