Using Angular 9 + Tailwind CSS

Configuring Angular to be used with Tailwind CSS.

Code |

February 25, 2020

  1. Install the following:
npm i tailwindcss postcss-scss postcss-import postcss-loader @angular-builders/custom-webpack -D
  1. In the styles.scss file and add the following:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  1. In the project directory, use npx tailwind init.
  2. Create webpack.config.js file and add the following code:
module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    syntax: 'postcss-scss',
                    plugins: () => [
                        require('postcss-import'),
                        require('tailwindcss'),
                        require('autoprefixer'),
                    ]
                }
            }
        ]
    }
};
  1. Modify the angular.json:
{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    }
  }
}

There might be cases where the "builder: " might have different address. We would need to change it to the code we have above: "builder": "@angular-builders/custom-webpack:browser", & "builder": "@angular-builders/custom-webpack:dev-server".

Start building Angular project with npm start or ng serve --open.
Now we can use Tailwind CSS.

Source: Angular 8 + Tailwind CSS Guid (Updated for Angular 9) by Sean Kerwin

Copyright © 2020 Will Kim

Invely's