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.
Here is a possible fix.
I will start with tailwind.config.js
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
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.
Top comments (0)