javascriptangularangular-materialtailwind-csstailwind-3

Angular material 15 with Tailwind CSS 3.2.4 in Angular project mismatched

I am using Angular 15 with Angular material 15, then I have added Tailwind CSS as per the instruction https://tailwindcss.com/docs/guides/angular

The material component design got mismatched as shown below

enter image description here

The placeholder name is truncated as it should be

enter image description here

The line appears in the text box.

In the style.scss

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

Tailwind config

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

  • Tailwind by default adds a border on the right side of the items (something like that). Adding a border-style: none does solve this problem. You add the following code to your global styles file and it should work (at least it worked for me)

    *, ::before, ::after {
  border-style: none;
}

    Following the above method would also remove all the border styles from your app. Found the following solution which only effects the classes in mat-forms-field > mat-label

    .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;
}