Question 234710 in CSS Question posted in
Some basic documentation can be found here.

Using Angular Material UI and Tailwind CSS together

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 ?

Tags:

2

Answers


  1. 0

    In order to use tailwind CSS with Angular, you can check the official documentation. Here is the link
    https://tailwindcss.com/docs/guides/angular

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search