I am using Angular 15 with Angular material 15, then I have added Tailwind CSS as per the instruction

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.

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

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

The placeholder name is truncated as it should be

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

• javascript
• angular
• angular-material
• tailwind-css
• tailwind-3

• 1 having same issue, did you get to solve it? – add9 Commented Dec 4, 2022 at 12:49
• @add9 Nope I haven't found the solution till yet – San Jaisy Commented Dec 4, 2022 at 23:31
• stackoverflow.com/a/74501000/649419 here is one solution worked for me – add9 Commented Dec 6, 2022 at 15:48
• @add9 That seems to be working fine for the border, however, the padding for placeholder is not working. – San Jaisy Commented Dec 14, 2022 at 7:35
• I am unable to reproduce the placeholder issue, can you post the HTML and any custom CSS you are using for the form field – Mr. Stash Commented Dec 14, 2022 at 11:21

5 Answers 5

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

Actually by just adding:

corePlugins: { preflight: false },

Works.... below my full tailwind config:

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

Thanks to Yorguin Augusto Lopez Ortiz

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

• UPDATE

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

these all the styles I use to fix the material / tailwind combo:

//*******************************
//** Material / tailwind fixes **
//*******************************
.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;
}

.mat-mdc-input-element {
  box-shadow: none !important;
}

.sticky {
  position: sticky !important;
}

[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
  padding: 0;
  border: none;
}

It has something to do with tailwind applying border-style: 'solid' to everything.

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