npm run dev does not return to cli in laravel-mix

[wesleylether]

What version of @tailwindcss/jit are you using?

v0.1.5

What version of Node.js are you using?

v14.11.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://www.youtube.com/watch?v=3O_3X7InOw8

When you add the @tailwindcss/jit postcss processor in webpack.mix.js example:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('postcss-nested'),
        require('@tailwindcss/jit'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

When you run npm run dev the process "hangs" and not exited. This happens like npm run watch or npm run hot but then it reloads the code.

So when you run npm run dev you will have to CTRL+c to exit the process so you can type again. This should not happen with npm run dev :)

[adamwathan]

Hey! This is expected albeit unintuitive, but it's covered in the README:

Make sure you set NODE_ENV=development if you are running a watcher, or Tailwind won't watch your template files for changes. Set NODE_ENV=production for one-off builds.

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.

For example if you want to do one-off builds with NODE_ENV=development, explicitly set TAILWIND_MODE=build so that Tailwind knows you are just doing a one-off build and doesn't hang.

Add the TAILWIND_MODE=build environment variable if you want to do one-off development builds instead of running a dev server 👍🏻

Duplicate of #113.

[wesleylether]

Ahh! I totally missed that part in reading the documentation!!! Thank you for the extreme fast response!

I will read the docs better next time! Really loving jit tough.

[thisisjamessmith]

Just in case it helps anyone else using Mix who doesn't necessarily want/need separate dev/prod build processes you can amend the watch script in your package.json's scripts section as follows to do a full production build locally on watch:

"watch": "NODE_ENV=production TAILWIND_MODE=watch mix watch"

The speed of JIT makes this a totally feasible way of working in my opinion... at least for simple projects that build very fast and don't require a separate npm run prod. The only downside is that you obviously end up with minified files locally, but for me that's a small price to pay to have a nice simple singular build process. (I also like the fact that I'm testing the minified files locally to avoid any nasty minifier surprises when pushing to production).