Angular, Angular Material, and TailwindCSS

Jacob Neterer
Aug 29 · 6 min read

If you’re like me and you love Angular and Angular Material, wait until you try development with the addition of TailwindCSS. If you haven’t heard about TailwindCSS, you should check out their site to see how this utility-first CSS framework can make web development lightning fast! I’m going to walk through how to set up an Angular application that uses both Angular Material and TailwindCSS. This tutorial was created using Angular version 10.0.6 and TailwindCSS version 1.6.2. If you’re looking for a tutorial on how to set up an Angular application without Angular Material but still uses TailwindCSS, check out my other tutorial here.

Image for post
Image for post

Create Your Angular App

ng new angular-material-tailwindcss-app

When the CLI asks you which styling framework to use, choose SCSS.

Set Up Angular Material

Using the Angular CLI install schematic

Let’s start by using Angular’s CLI install schematic to walk us through the Angular Material setup. Run the following command:

ng add @angular/material

It will then ask you what theme you would like. Choose one of the prebuilt themes or custom for your own custom theme. Next, you can decide if you want to set up Angular Material Typography styles and browser animations for Angular Material. I would choose yes for both. You should see the following files updated:

  • package.json — new Angular Material dependencies
  • app.module.tsBrowserAnimationsModule imported
  • angular.json — if you chose a prebuilt theme, you will see that theme imported in the styles arrays. Otherwise you will need to create your own custom theme and define it in the styles arrays yourself
  • index.html — adding Angular Typography and Icons links in the header and the mat-typography class to the body element
  • styles.scss — some helpful styles for Angular Material

That should conclude the setup for Angular Material!

Test it out

Add the MatButtonModule to the imports array of your app.module.ts file.

...
import { MatButtonModule } from '@angular/material/button';
@NgModule({
...,
imports: [
...,
BrowserAnimationsModule,
MatButtonModule
],
...
})
export class AppModule { }

Then, copy and paste the following HTML into your app.component.html file. We are adding some text and three buttons with the Angular Material primary, secondary, and warn styles.

<h1 style="margin: 2rem 0; text-align: center; font-size: 4rem; font-weight: bold;"><span style="color: #38B2AC;">TailwindCSS</span> and <span style="color: #e53e3e;">Angular</span> is awesome!</h1>
<div style="display: flex; justify-content: space-around; margin: 20px 0">
<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn">Warn Button</button>
</div>
<p style="margin: 2rem 0; text-align: center; font-size: 1.875rem;">Thanks for reading!</p>

If you build the application ng serve and open localhost:4200 you should see Angular Material working in action!

Image for post
Image for post

Set Up TailwindCSS

Install dependencies

npm install tailwindcss -D

Next, we will install @angular-builders/custom-webpack for a custom webpack build step and the various postcss packages for building Tailwind.

npm install @angular-builders/custom-webpack postcss-scss postcss-import postcss-loader -D

Create webpack.config.js

module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
}
]
}
};

Modify angular.json

ng config projects.<your-project>.architect.build.builder @angular-builders/custom-webpack:browserng config projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.jsng config projects.<your-project>.architect.serve.builder @angular-builders/custom-webpack:dev-serverng config projects.<your-project>.architect.serve.options.customWebpackConfig.path webpack.config.js

Initialize TailwindCSS

npx tailwind init

TailwindCSS ships with default styles, but you can use this file to customize themes, breakpoints, colors, spacing, and more!

OPTIONAL: Setting Tailwind styles as important

module.exports = {
important: true,
...
}

Inject Tailwind’s Styles

/* You can add global styles to this file, and also import other style files */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
...

Purge Unused TailwindCSS Classes

First, install dotenv.

npm install dotenv -D

We will use dotenv for loading an environment variable that tells Tailwind if we need to purge unused classes or not.

Next, let’s modify our tailwind.config.js file to purge any unused classes. We simply require dotenv, access the ENABLE_PURGE environment variable (if not found, say in your local environment, defaults to false), set purge enabled to true if purge is true, and search any *.html and *.scss files for classes that we’ve used.

+require('dotenv').config();
+const enablePurge = process.env.ENABLE_PURGE || false;
module.exports = {
- purge: [],
+ purge: {
+ enabled: enablePurge,
+ content: [
+ './src/**/*.html',
+ './src/**/*.scss'
+ ]
+ },
theme: {
extend: {},
},
variants: {},
plugins: [],
}

Lastly, don’t forget to create your .env file with ENABLE_PURGE set to true. As a note, you don’t need to do this for local development, but I do urge purging any unused classes in higher environments like test and production.

ENABLE_PURGE=true

Test it Out!

<h1 class="my-8 text-center text-6xl font-bold"><span class="text-teal-500">TailwindCSS</span> and <span class="text-red-600">Angular</span> is awesome!</h1>
<div class="flex justify-around my-8">
<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn">Warn Button</button>
</div>
<p class="my-8 text-center text-3xl">Thanks for reading!</p>

Once you’ve made your edits, serve your Angular application ng serve and check out your working Angular app that uses both Angular Material and TailwindCSS!

Image for post
Image for post

Check out my GitHub repo that demonstrates this tutorial!

When Using a Custom Angular Material Theme

Image for post
Image for post

Instead of importing @angular/material/theming, import it like so:

@import '<relative-path-to-node_modules>/node_modules/@angular/material/_theming.scss';

Final Thoughts

You can find me on Twitter, GitHub, LinkedIn, and my website!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store