javascriptangularangular-materialtailwind-csstailwind-css-3

Form field layout and placeholder issues after adding TailwindCSS v3

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:

enter image description here

The placeholder name is truncated as it should be:

enter image description here

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: [],
}
Solution

  • TailwindCSS by default adds a border on the right side of the items. Adding a border-style: none; does solve this problem.

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

    Following the above method would also remove all the border styles from your app.

    Found the following solution (source: Yorguin Augusto Lopez Ortiz's answer) 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;
}