npm run watch - keeps compiling when no changes

Hi,

I have a Jigsaw by Tighten side, which I have recently updated from Tailwindcss 2 to Tailwindcss 4.

My composer.json is quite small.

{
    "require": {
        "php": "^8.3",
        "tightenco/jigsaw": "^1.7"
    }
}

my package.json is not that complex either.

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "watch": "mix watch",
        "staging": "NODE_ENV=staging mix",
        "prod": "mix --production"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.21",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.10",
        "laravel-mix-jigsaw": "^2.1.1",
        "postcss": "^8.5.3",
        "postcss-import": "^14.1.0",
        "tailwindcss": "^4.1.2"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^6.7.2",
        "@tailwindcss/postcss": "^4.1.2"
    }
}

my webpack.mix.js

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

mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');

mix.jigsaw()
    .js('source/_assets/js/main.js', 'js')
    .postCss('source/_assets/css/main.css', 'css', [
        require("@tailwindcss/postcss"),
    ])
    .copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'source/assets/build/webfonts')
    .options({
        processCssUrls: false,
    })
    .version();

For some reason after the update my npm run watch runs in an infinite loop, even when no changes are made, just keeps compiling.

I'm not really a frontend person or frontend tooling person, so I would really appreciate help and pointers.

Thanks in advance.

Braunson

10 months ago

Best Answer

Level 18

This infinite loop is likely caused by Tailwind CSS 4's new file watching behavior conflicting with Laravel Mix's watcher. Tailwind 4 has its own built-in watcher that can trigger Mix's watcher, creating a feedback loop.

Options:

Exclude the build directory from watching (in webpack.mix.js)

...
.webpackConfig({
    watchOptions: {
        ignored: [
            /node_modules/,
            /source\/assets\/build/  // Exclude your build directory
        ]
    }
})
...

Use Tailwind 4's native water instead (replace the watch script)

"scripts": {
    ...
    "watch": "tailwindcss --watch --input source/_assets/css/main.css --output source/assets/build/css/main.css",
    ...
}

tomasnorre

10 months ago

Level 51

Thanks for your reply, for some reason this isn't the case anymore. I see your options as valid, so will mark the answer.

Thanks for taking your time.

Please or to participate in this conversation.