TailwindCss : purge not working with Symfony and Webpack Encore

[TheoLyn69]

The Problem :

(Sorry for my broken english, I'm french)
I configure TailwindCss for using it into my Symfony Project, with Webpack Encore.
I installed all the package and configured them. It seems to work, except for the purge function.

Whatever the values I put into the "purge" parameter in my "tailwind.config.js", the final CSS always have the same size (3Mib !!).
If it's empty, it's 3Mib. If I put "./templates/**/*.twig", it's 3 Mib.
For information, my twig templates doesn't include, at the moment, any tailwindcss classes. Only (old) bootstrap classes. I didn't start to use tailwind css classes : I first check if all is working.

Link to a minimal reproduction:

Here is my package.json (NPM) :
{ "devDependencies": { "@symfony/stimulus-bridge": "^2.0.0", "@symfony/webpack-encore": "^1.0.0", "autoprefixer": "^10.2.4", "core-js": "^3.0.0", "postcss": "^8.2.5", "postcss-loader": "^5.0.0", "postcss-nested": "^5.0.3", "precss": "^4.0.0", "regenerator-runtime": "^0.13.2", "stimulus": "^2.0.0", "tailwindcss": "^2.0.2", "webpack-notifier": "^1.6.0" }, "license": "UNLICENSED", "private": true, "scripts": { "dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev --watch", "build": "encore production --progress" }, "dependencies": {} }

I import tailwindcss css files into my app css files, using :
@tailwind base; @tailwind components; @tailwind utilities;

I configured my postCSS loader with this postcss.config.js :
const tailwindcss = require("tailwindcss"); module.exports = { plugins: [ //require('postcss-import'), //require('precss'), //require('tailwindcss'), tailwindcss('./tailwind.config.js'), require('postcss-nested'), require('autoprefixer'), ] }

(I know that I could write "require('tailwindcss')", but I tried this other method for being sure my tailwind.config.js file is read...)

In my tailwind.config.js, I have :
module.exports = { purge: [ './templates/**/*.twig' ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

When I use "npm run dev", my final app.css is about 4,99 Mib. When I use "npm run build", my final app.css is 3Mib.

If I delete the filter in the purge parameter, the final app.css is always 3 Mib.
I tried other parameters (like preserveHtmlElements: false) because I suppose it should reduce my final app css file. But its still 3MiB.

I'm quite lost. If purge doesn't work, I will not be able to use Tailwind because 3Mib is too much...

If you have any idea to help me, I will be very graceful.

Regards,

--
Sylvain

[adamwathan]

Does Symfony set NODE_ENV to production when doing a build? If not PurgeCSS won't run.

[TheoLyn69]

Hi Adam,

Thank you for your quick reply (and for Tailwind CSS !!!)

Yes, the NODE_ENV is set to production. I'm using the webpack.config.js which includes the
if (!Encore.isRuntimeEnvironmentConfigured()) { Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev'); }
instruction.

If I build for dev environment, CSS is 5Mib. If I build for production, CSS is 3Mib. We see a variation between both which means the environment detection is correct. I think it's not a problem with dev vs production...

--
Sylvain

[TheoLyn69]

Does Symfony set NODE_ENV to production when doing a build? If not PurgeCSS won't run.

OK. I was wrong. NODE_ENV was not valued with "production". It was "undefined"....
I force value, for testing purpose, and yes, the final css file is only 5Kib....

Sorry for inconvenience...

Regards

Sylvain