Angular 11.2^ + Tailwind + NX - Buld slow and freezing when purge enabled

Question

If you have multiple applications in an NX Workspace and you are using TaiwindCSS you might have slow builds or build will be stuck when purge is enabled.

Since Angular 11.2, Tailwindcss now work out of the box. but purging is still not smooth at-list for me, maybe this might be NX Workspace problem. It took me hours to fix this.

  module.exports = {
      purge: {
        enabled: process.env.NODE_ENV === 'production',
        content: [
          `./apps/**/*.html`,
          './libs/**/*.html',
        ],
      },
      mode: 'aot',
      darkMode: false, // or 'media' or 'class'
      theme: {
            extend: {},
          },
          variants: {},
          plugins: [],
      },
    };

Answer 1

Here is a possible fix.

Now to purge you need to enable it and tell tailwind where to purge.

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      `./apps/${process.env.APP_NAME}/src/**/*.html`,
      './libs/**/*.html',
    ],
  },
  mode: 'aot',
  darkMode: false, // or 'media' or 'class'
  theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
  },
};

The magic is those two environment variables NODE_ENV and APP_NAME. APP_NAME is to make sure your build only purge the project you currently building and NODE_ENV will enable purge.

And now to finish everything, you need to add those variables in your package.json build script. In my workspace I have an Admin app and Store app.

// package.json
{
  "name": "myawesome-app",
  "version": "0.2.25",
  "license": "MIT",
  "main": "dist/apps/functions/main.js",
  "scripts": {
    "ng": "nx",
    "nx": "nx",
    "start": "ng serve --project store",
    "start:admin": "ng serve --project admin",
    "build:store": "NODE_ENV=production APP_NAME=store ng build --prod --project store",
    "build:admin": "NODE_ENV=production APP_NAME=admin ng build --prod --project admin",
  }
...

That's how I managed to purge Tailwind in my project, I am not sure if this is the correct way, but It's working and builds are very fast.

Answer 2

For anyone looking for a viable solution - since Angular 11.2.0 tailwind is supported out of the box. You can provide root tailwind.config.js file and per project individually. To speedup css purging, you can provide paths to process only currently built application by adding tailwind.config.js file to the project directory, i.e. there's my configurations:

// File located in:
// <workspace>/apps/admin/tailwind.config.js
module.exports = {
    purge: {
        enabled: true,
        content: [
            './apps/admin/**/*.{html,ts}',
            './libs/**/*.{html,ts}',
        ],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

And to build frontend application:

// File located in:
// <workspace>/apps/webapp/tailwind.config.js
module.exports = {
    purge: {
        enabled: true,
        content: [
            './apps/webapp/**/*.{html,ts}',
            './libs/**/*.{html,ts}',
        ],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

Also keep in mind, that tailwind resolves paths from current working directory, that's why I've put paths relative to the workspace. Running build command from any other directory but workspace won't work.