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

  • You must add into your tailwind.config.js in module.exports the next config:

    corePlugins: { preflight: false },

    Using the above solution can cause some problems with tailwindcss classes. For this reason it is better to add the following lines in style.scss:

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