Using Angular Material UI and Tailwind CSS together

Question

I have been using Material UI with Angular, however as flexlayout is deprecated now, and Tailwind is recommended, so is it sustainable to use bot Material UI and Tailwind together? In order to use Tailwind classes , how do I apply it? Add to a new or to the <mat- ... > tags ?

Answer 1

Your question suggests some confusion so I'll clarify:

Material UI

This is an opinionated design and angular material ui is a component library that adheres to this design. It's very hard to override styles. You configure the styles via a scss stylesheet.

Tailwind

Despite what some people may say this is a un-opinionated css utility library. It's another way of writing css like sass or less. Whilst it does have default styles these are overide-able so that class names can effectively become design tokens.

---

I have been using Material UI with Angular, however as flexlayout is deprecated now, and Tailwind is recommended

By whom? Whilst I'm a big Tailwind fan I doubt anyone official from Angular are giving such recommendations.

, so is it sustainable to use bot Material UI and Tailwind together?

It's possible providing you're using tailwind for things like placing of components. In other words, how you'd normally use css.

There's some configuration I recommend like matching your tailwind config to match the angular colors, typography etc you're using.

angular-styles.scss

$indigo-palette: (
  900: #19216c,
  800: #2d3a8c,
  700: #35469c,
  600: #4055a8,
  500: #647acb,
  400: #7b93db,
  300: #98aeeb,
  200: #bed0f7,
  100: #c5cae9,
  50: #e8eaf6,
  contrast: (
    50: rgba(#1f2933, 0.87),
    100: rgba(#1f2933, 0.87),
    200: rgba(#1f2933, 0.87),
    300: rgba(#1f2933, 0.87),
    400: rgba(#1f2933, 0.87),
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
  ),
);
$orange-palette: etc...
$red-palette: etc...
);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette($indigo-palette, 600),
      accent: mat.define-palette($orange-palette, 600),
      warn: mat.define-palette($red-palette, 500),
    ),
    typography: mat.define-typography-config(),
    /**
      The density system is based on a density scale.
      The scale starts with the default density of 0. 
      Each whole number step down (-1, -2, etc.) reduces the affected sizes by 4px, 
      down to the minimum size necessary for a component to render coherently.
    */
      density: 0,
  )
);

@include mat.all-component-themes($my-theme);

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [], // provide glob of files that have tailwind class
  theme: {
    colors: {
      white: colors.white,
      indigo: {
        900: '#19216c',
        800: '#2d3a8c',
        700: '#35469c',
        600: '#4055a8',
        500: '#647acb',
        400: '#7b93db',
        300: '#98aeeb',
         etc.

In order to use Tailwind classes , how do I apply it?

Just add classes. e.g.

<mat-card class="max-w-xl flex-1">
 ...

Add to a new or to the <mat- ... > tags ?

This is where my concern about the question you're asking comes in. If you're trying to use tailwind css to edit the material components styles I don't recomend this.

Answer 2

You can use it like in other html elements, but some part of tailwind classes need to prefixed with "!"

<mat-expansion-panel class="!shadow-none">
  Add !important to the class
</mat-expansion-panel>

You can read this at: https://tailwindcss.com/docs/configuration#important from official documentation.