10

Before focusing:

Before focus

After focusing:

After focus

Problem:

Using angular mat v. 15 and latest tailwindcss there is a bug when focusing input field.

To reproduce the problem:

ng new angular-test
cd angular-test
ng add @angular/material
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

styles.scss

[...]

/* You can add global styles to this file, and also import other style files */

@tailwind base;
@tailwind components;
@tailwind utilities;

app.component.html

<mat-form-field appearance="outline">
  <mat-label>Favorite food</mat-label>
  <input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>

Any ideas how to solve the problem?

Just Pilot
  • 474
  • 3
  • 11

1 Answers1

13

tailwind is adding border-style: solid; which is causing the extra border to be rendered

quick solution would be to override the right border style

add this in the styles.css file

.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;
}
Mr. Stash
  • 2,940
  • 3
  • 10
  • 24
  • 1
    This seems to be working for border, however, for the padding the issue still exists https://stackoverflow.com/questions/74621735/angular-material-15-with-tailwind-css-3-2-4-in-angular-project-mismatched – San Jaisy Dec 14 '22 at 07:37
  • is also had to add this: .mat-mdc-input-element { box-shadow: none !important; } – Ruben Mar 31 '23 at 19:50