Angular, Angular Material, and TailwindCSS

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.

Create Your Angular App

First, let’s create our angular application.

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

Setting up Angular Material is pretty straightforward. They provide great documentation on how to do so, and I will also describe it here.

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