Tailwind-like utility classes for Angular Material.
Example: bg-accent-500
, text-primary-200-contrast
npm i ng-material-utility
In your global styles.scss
, add the mixin all($theme)
to include all color-based classes supported i.e background-color
, color
, outline-color
, border-color
, and text-decoration-color
.
@use 'ng-material-utility' as ng-material-utility;
// Code defining your Material $theme.
@include ng-material-utility.all($theme-var);
You can also choose to generate only the classes that you need using the following mixins:
@include ng-material-utility.color($theme-var);
@include ng-material-utility.background-color($theme-var);
@include ng-material-utility.border-color($theme-var);
@include ng-material-utility.text-decoration-color($theme-var);
@include ng-material-utility.outline-color($theme-var);
- Adds about 43kB of Raw Size to the styles when all styles are used.
- Moves you one step further to having all your styles in CSS and not inlined by Angular at runtime.