Using Tailwind CSS in an Angular CLI App

I was only recently introduced to the Tailwind CSS framework while putting together a sample for the Lap around the Microsoft Graph Toolkit series. I liked the simplicity of Tailwind although it took me a while to get it working in an Angular app created with the Angular CLI (V9) so I’m sharing the steps I took to get it setup.

Create the Web App using the Angular CLI

If you’ve never used the Angular CLI before you can install it by executing the following command.

npm install -g @angular/cli

Now we are ready to use the Angular CLI to create our app. Angular CLI commands begin with ng, we can create a new application with the command

ng new demo-mgt-angular

The Angular CLI prompts for a few configuration options, ensure you select SCSS for the stylesheet format.

Scaffolding may take a few minutes as it will also download all the dependant npm packages. Opening the resulting folder in VS Code will reveal the default Angular project ready to build and try out. The README.MD file provides instructions on how to work with this default project.

From here you should be able to build and debug the default app using the ng serve command and opening a browser to http://localhost:4200

Add the Tailwind CSS Package

When adding the Tailwind CSS node package we also need to modify the webpack configuration in order for the build and bundling to work correctly.

Firstly let’s get all the necessary npm packages (both the Tailwind CSS package and the packages we will need in our modified Webpack processing)

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

Next, open the styles.scss file in the root folder and add the following at the top

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Now we need to generate a default Tailwind configuration file (tailwind.config.js) by using the command

npx tailwind init

We don’t need to change anything inside that generated tailwind.config.js file but it does need to exist.

Modify the Webpack Bundling Pipeline

Create a file called webpack.config.js in folder root with this exact contents

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

Now we need to update the angular.json file (in the root folder of your app) to let it know about that custom Webpack configuration file webpack.config.js file we just created.

This change is a bit trickier as we have to locate and modify some of the existing configuration settings in this file.

1 – In architect|build section change builder from “@angular-devkit/build-angular:browser” to “@angular-builders/custom-webpack:browser”

2 – In architect | build section add the following to options:

"customWebpackConfig": {
   "path": "./webpack.config.js"
},

3 – In serve section change builder from “@angular-devkit/build-angular:dev-server” to “@angular-builders/custom-webpack:dev-server”

4 – In serve section add the following to options:

"customWebpackConfig": {
   "path": "./webpack.config.js"
},

Here’s the GitHub repo with the completed sample Angular App using Tailwind CSS following this technique.