Form field layout and placeholder issues after adding TailwindCSS v3

Question

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

The material component design got mismatched as shown below:

The placeholder name is truncated as it should be:

The line appears in the text box.

style.scss

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

tailwind.config.js

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

Answer 1

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  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;
}