postcss hangs winh env=development
vladdu opened this issue · 6 comments
What version of @tailwindcss/jit are you using?
v0.1.3
What version of Node.js are you using?
v14.16.0
What browser are you using?
N/A
What operating system are you using?
Ubuntu 20.4
Reproduction repository
https://github.com/vladdu/tw2demo
This is just a very basic project, nothing fancy. If I run postcss in development mode or without specifying an env, it hangs after generating the css file. In production mode, all is well. If I change to using regular tailwindcss, it works fine in dev mode too.
I use latest versions of everything.
It could be a postcss issue, but since it appears related to running jit, I thought it might be useful to post it.
Hey! This is expected behavior and covered in the installation section of the README, you need to explicitly set TAILWIND_MODE=build if you want to do non-production builds without running a watcher 👍🏻
Thank you Adam, but the README doesn't actually say that: it doesn't cover the case with development mode and no watcher. I don't usually use a watcher, and I don't set NODE_ENV. For JIT, it is indeed useful to always do that, but the README said "Now start your dev server or build tool as you normally would and you're good to go. Make sure you set NODE_ENV=development if you are running a watcher,..."
I think the README should explicitly say that 'development mode' == 'default mode' == 'must use watcher', or not hang unless a watcher is used (but I guess there's no way to know that)
Here's the text from the README:
If you want to control whether Tailwind watches files or not more explicitly, set TAILWIND_MODE=watch or TAILWIND_MODE=build to override the default NODE_ENV-based behavior.
Development mode and no watcher is this:
TAILWIND_MODE=build NODE_ENV=development npm run build-my-stuff
I'll try to think of a way to make it clearer.
@adamwathan but strangely, it appears to be watching... but is not watching (at least for me, as of today). Even if I force it, like:
TAILWIND_MODE=watch NODE_ENV=development npm run build:tailwind
It is properly finding my classes in my index.html for example, but if I modify the file, it does not update the output CSS file, does not add any of the new classes, even though it is clearly hanging, doing something.
For reference:
"build:tailwind": "postcss src/Css/tailwind.css -o src/Css/tailwind.output.css",
So how does it find the list of files to watch? From the purge: key? Either way, just running the command itself does find the classes in my public.html, but it just does not update anything when I add more classes, even though it is "hanging".
Actually now that I have looked at #126 I'm having pretty much the same issue as they are having (and happen to be using snowpack as well)
@sebastienbarre Looks like you are missing the "-w" flag to postcss, it won't run a real watcher without that 👍🏻
Oh I see. Thanks Adam. I guess I thought there was something happening under the hood on the Tailwind JIT side, since it can be influenced with TAILWIND_MODE=watch.
Maybe it would help if you released the small source code used in your YouTube video introducing the JIT, from March 15. I cannot for the life of me reproduce it, even by only watching my index.html I still end up with a lot of stuff in my output CSS file, such as all w- classes...