TailwindCSS is way too big with Angular build

Question

When I use Tailwind to style an Angular application with a custom webpack, the styles.js chunk is huge after running ng build, coming in at around 30mb. This not only takes forever to build, but also slows down my web app.

After purging the Tailwind, the styles.js chunk is far smaller (~100kb), however 30mb just seems ridiculously big, even un-purged.

This even applies to a fresh application built with https://github.com/notiz-dev/ngx-tailwind, so I'm not sure what is causing the issue.

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

webpack.config.js

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

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ngxTailwind": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "extraWebpackConfig": "webpack.config.js",
            "outputPath": "dist/ngxTailwind",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "extraWebpackConfig": "webpack.config.js",
            "browserTarget": "ngxTailwind:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngxTailwind:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ngxTailwind:build"
          }
        },
        "test": {
          "builder": "ngx-build-plus:karma",
          "options": {
            "extraWebpackConfig": "webpack.config.js",
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ngxTailwind:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ngxTailwind:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "ngxTailwind",
  "cli": {
    "analytics": "c9efd59e-9db9-4f26-9a6f-e35b477d8e5a"
  }
}

styles.scss

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

Does anyone have any idea as to why it's so big? I understand it is not purged, but https://tailwindcss.com/docs/optimizing-for-production claims the uncompressed size is under 4mb, why am I getting nearly 7 times this?

Answer 1

Just change tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.{html,ts}']
  },
  //Other Code
};

then build: ng build --prod

Reference: Enabling manually