Using the Tailwindcss/jit Compiler with Phoenix

The provided instructions are ok, I needed to write this change to fix a webpack issue:

and this repo has a working config for me:

Even with the webpack fix above, I still noticed one time I had to invalidate the css file’s hash to make it get new changes. I am 99% 90% on this being a webpack4 issue (or a dependency that can’t bump to latest because of phx locking to wb4). No issues after that though.

E:

Revisiting that repo, it still seems flakey. Really inconsistent bug, but I don’t get issues on my main project that uses JIT, which is using a config transplanted from this repo, so can’t say. E: Actually this may be something to do with using Temple in that project and the second compile step triggers watcher more reliably or something.

Basically it needs to be “warmed up” by invalidating the css hash and maybe banging a webpack/tailwind conf then after that it all seems to function as expected. I also run with NODE_ENV=development mix phx.server, but I also set that explicitly in my package.json scripts (which I remember now don’t get run because phx uses it’s own watcher). I don’t really have the bandwidth to debug the whole thing so it’s a bit of “thow spaghetti at wall”.

Note that --mode X and NODE_ENV=X are different. --mode just enables some changes in webpack it doesn’t filter down to other tools.

Possibly including some build cleaner on webpack run would solve these issues, so a fresh file is made every time you start it up.

1 Like