Weird border when using Angular Material

[shadow1349]

What version of Tailwind CSS are you using?

I'm using Tailwind 3.2.4

What build tool (or framework if it abstracts the build tool) are you using?

I'm using Angular 15.0.1, Angular Material/CDK 15.0.2.

What version of Node.js are you using?

v16.14.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Here is a repo to reproduce the issue

https://github.com/shadow1349/angular-tailwind-issue-repro

Describe your issue

When I use Tailwind and Angular Material I get this weird border. If you look at the repo I linked you'll be able to run that and see what I mean.

[wongjn]

The following element, .mdc-notched-outline__notch:

is responsible for the border. This is because of the following rule:

.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
  border-width: 2px;
}

It seems like the library assumes that its elements would have default border-style: none but as you point out, Tailwind preflight sets border-style: solid for all elements. To resolve your problem you could consider:

• Removing the border manually from the offending element
• Disable the preflight core plugin (and optionally roll your own modified version).

[shadow1349]

thanks for the reply, in my project I had unset the border style which I was afraid was going to be the only answer lol. I hadn't seen that you can disable the preflight styles, which is super cool. I might give that a go and see what I can come up with. I think I probably should have also opened an issue in the Angular material repo, but I had done so here first since tailwind was adding the border style. I'm also really curious as to why this wasn't an issue before angular material 15, but probably something to bring up with them.

Thanks again!

[elvince]

Thanks for the explaination.
Do you think we can customise the preflight to not interfere with material design component?
Thanks,

[wongjn]

The preflight is not customizable – you'd have to look at disabling it an running your own (modified) version.

[jhourlad01]

@shadow1349 Can you show what exactly did you do to remedy that problem?

[shadow1349]

Hey @jhourlad01, I just included the following in my styles.scss file after tailwind is initialized.

// Style to fix the weird border with angular material
.mdc-notched-outline__notch {
  border-right: none !important;
}

[jhourlad01]

That works. Bless you for sharing.

[SippieCup]

that is not ideal, because it removed notched outlines from where there should be some in other places.

A better way to do it is to target it only for mdc-form-fields. the CSS selector is hideous, but this doesn't break the material design in other places.

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  border-right-style: hidden;
}
.mat-mdc-input-element {
  box-shadow: none !important;
}

this keeps mdc-notched-outline displaying correctly in other places.

[DouglasDiaz]

.mat-mdc-form-field .mdc-notched-outline__notch {
    margin-left: -1px;
    -webkit-clip-path: inset(-9em -999em -9em 1px);
    clip-path: inset(-9em -999em -9em 1px); <----
}

Thats what causes the issue.
Manually adjusting the clipping fixed it for me.

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  -webkit-clip-path: inset(-10px -6px 0px);
  clip-path: inset(-10px -6px 0px);
}