Angular material 15 with Tailwind CSS 3.2.4 in Angular project mismatched

Question

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

https://stackoverflow.com/a/74501000/649419 here is one solution worked for me — add9, Dec 06 '22 at 15:48
@add9 That seems to be working fine for the border, however, the padding for placeholder is not working. — San Jaisy, Dec 14 '22 at 07: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, Dec 14 '22 at 11:21
I also had to add this: .mat-mdc-input-element { box-shadow: none !important; } — Ruben, Mar 31 '23 at 19:49

Yorguin Augusto Lopez Ortiz · Answer 1 · 2023-01-13T01:36:11.503

4

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

edited Jan 13 '23 at 01:36

answered Jan 13 '23 at 01:02

Yorguin Augusto Lopez Ortiz

41
3

Munyyb Ur Ryhman · Answer 2 · 2023-02-22T18:31:46.483

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

score 0 · Answer 3 · answered Dec 11 '22 at 15:16

0

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

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

answered Dec 11 '22 at 15:16

Kyoss

172
1
11

Not working, it creates a space at the border. – San Jaisy Dec 14 '22 at 07:30
I just had the exact same problem in a new project with angular 15.1.0 and tailwind 3.2.6 and the above code fixed the problem again. – Kyoss Feb 15 '23 at 17:37

score 0 · Answer 4 · answered Mar 31 '23 at 21:46

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

Angular material 15 with Tailwind CSS 3.2.4 in Angular project mismatched

4 Answers4

Linked