Using the Tailwindcss/jit Compiler with Phoenix

Phoenix Forum Questions / Help
, ,
21

Yes, I did encounter this behavior as well. And, it doesn’t change with Webpack 5.

My process of debugging:

  1. applied text-green-200
  2. changed text-green-200 to text-blue-200, then checked the css file, I found the text-green-200 was still in the file, along with the text-blue-200

It seems that used classes will not be trimmed. I had to restart the webpack to solve this problem.

I think this has little impact on the production environment. Because you always rerun webpack to compile CSS.

1 Like
22

AFAIK this is intentional as a performance trick so it doesn’t have to recompute classes all the time.

Since you should be rebuilding your CSS on release, you don’t get any of the “dead” classes in production since it will start from a clean state.

2 Likes
23

I can confirm, that updating to tailwind 2.1 resolves the issue even with webpack v4. Thanks!

1 Like
24

Thank you everyone for this helpful discussion! Just to add my experience: Even with Tailwind 2.1 I still need to comment out .concat(devMode ? [new HardSourceWebpackPlugin()] : []) in webpack.config.js or else everything is unpredictable.

1 Like