I often have to work with Angular at my current employer and I've started using Tailwind CSS for almost every project this year, be it private or work, especially when working with a team. So here's a short tutorial on how to quickly set everything up.

1. Create a new Angular project

This step can be skipped if you already have an Angular project up and running. If not, the fastest way to create one is by using the Angular CLI. Install it globally by using your preferred package manager:

# npm
npm install -g @angular/cli

# yarn
yarn global add @angular/cli

After it is done installing, create a project with the ng new command. When asked which stylesheet format you would like to use, go with the first option (CSS) and wait until the dependencies are done installing.

2. Install Tailwind dependencies

Next up we need to get all needed dependencies for Tailwind CSS:

# npm
npm install tailwindcss postcss autoprefixer postcss-import --save-dev

# yarn
yarn add tailwindcss postcss autoprefixer postcss-import --dev

Open the styles.css located in the src folder and add the following imports:

// styles.css

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

3. Create a Tailwind config

This step is optional but is necessary if you want to customize your Tailwind installation. Run the following command to create the config file using npx:

npx tailwindcss init

This will create the tailwind.config.js at the root of your project. Read more about configuring Tailwind on the official docs.

4. Customize webpack configuration

In order to be able to use PostCSS we need to customize the build configuration of Angular. For this, we need another dependency:

# npm
npm install @angular-builders/custom-webpack --save-dev

# yarn
yarn add @angular-builders/custom-webpack --dev

It is now possible to extend the existing webpack config by creating a webpack.config.js file at the root. Insert the following code:

// webpack.config.js

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

Now all that's left to do is to tell Angular to actually use our custom config. This can be done by modifying the angular.json file:

// angular.json

{
  ...
  "architect": {
    "build": {
      // Replace the value for builder
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        ...
        // Add this to the options object
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    },
    "serve": {
      // Replace the value for builder
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        ...
        // Add this to the options object
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    }
  }
}

5. Setup PurgeCSS

One last step, which I highly recommend, is to remove unused CSS from your production builds. Check out this article from the official Tailwind docs with some great in-depth explanations. Add the purge option with all paths to your templates in your Tailwind config (see step 3):

// tailwind.config.js

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.ts',
  ],
  ...
}

After that, you should be done and ready to go!