No Purge

Hello,

I just saw tailwind the other day and wanted to merge it with angular which lead me here.

I wanted to first try to purge the CSS before I start with the app, but the problem I faced was that there was no purge happening when building for production and angular would give me the following error.

> NODE_ENV=production & ng build --prod

'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
√ Browser application bundle generation complete.

Warning: budgets: initial exceeded maximum budget. Budget 500.00 kB was not met by 3.35 MB with a total of 3.84 MB.

Error: budgets: initial exceeded maximum budget. Budget 1.00 MB was not met by 2.84 MB with a total of 3.84 MB.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-tailwind-components@0.0.0 build:prod: `NODE_ENV=production & ng build --prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-tailwind-components@0.0.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Extra Info:

• OS: Windows 10
• Node: 14.15.0
• Angular 11

I managed to solve this by doing the following:

Install dotenv

npm install dotenv -D

Update tailwind.config

require('dotenv').config();
const enablePurge = process.env.NODE_ENV || false;

module.exports = {
  purge: {
    enabled: enablePurge,
    content: [
      './src/**/*.html',
      './src/**/*.ts'
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Update package.json

add SET in build:prod script command

{
    ...
    "scripts": {
        ...    
        "build:prod": "SET NODE_ENV=production & ng build --prod"
    },
    ...
}

Result

> SET NODE_ENV=production & ng build --prod

√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.f67b3d0dbce69012d3b2.js      | main          | 182.19 kB
polyfills.8c151b8375e767ff858f.js | polyfills     |  36.00 kB
styles.37982bb62c8e9ed08b5e.js    | styles        |  14.70 kB
runtime.39392f927e7c9fd727c8.js   | runtime       |   1.45 kB

                                  | Initial Total | 234.34 kB

Build at: 2020-12-19T20:06:20.841Z - Hash: 58b2ca811974ccd8d53e - Time: 13798ms

Note: I don’t know if this can be considered an issue or not, but I hope it helps anyone who faces the same problem.

[danielehrhardt]

@darkside-e thanks for reporting this issue on Windows. There might be a solution to use the package cross-env so that setting NODE_ENV=production works across platforms like Windows as well as on Mac and Linux.

Can you try if it works with the following script and cross-env deps?

{
  "scripts": {
     "build:prod": "cross-env NODE_ENV=production ng build --prod"
     ...
  },
  "devDependencies": {
    ...
    "cross-env": "^7.0.3",
  }
}

@stuartkuentzel yes enabling purge by default also effects ng serve. Can you give it a try with the above approach?

It does work.

[danielehrhardt]

Should I include this in the schematics under a flag like --installCrossPlatform?

It should be a default.