1 min read

Angular cli working log

Mallim •

Instructions below are based on the following:

  • Angular 9 CLI (version 9.0.5)
  • Tailwindcss 1.0.4

For the impatient, you may check Github

Install the Angular CLI

yarn global add @angular/cli

Create a workspace and initial application (scss)

ng new angular9-starter-template --style=scss

Installing and configuring tailwindcss

cd angular9-starter-template

yarn add tailwindcss

npx tailwind init

Install dependencies for Angular custom webpacking

yarn add @angular-builders/custom-webpack

Look for src\styles.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

Revise angular.json

  • @angular-builders/custom-webpack:browser
  • path to a webpack.config.js
"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      "outputPath": "dist/angular-tailwind",
      ...
    },
  }
},
"serve":{
  "builder": "@angular-builders/custom-webpack:dev-server"
}

Add extra-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "postcss-loader",
            options: {
              plugins: [require("tailwindcss")("./tailwind.config.js")]
            }
          }
        ]
      }
    ]
  }
};

References