javascripttailwind-csslaravel-mixpostcss

Laravel Mix keeps compiling every second without stop with Tailwind v4


This is my first time using Tailwind v4, and as I understand it the installation has been dramatically simplified.

My typical workflow is to use PostCSS and Tailwind with Laravel Mix to compile the files.

When I run npx mix watch with Tailwind v4, it compiles constantly without waiting for changes to be made in the code. I don't know if this is due to me missing something in the setup so I have listed my files below.

webpack.mix.js:

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

mix
 .js("src/js/app.js", "dist/js/app.js")
 .postCss("src/css/app.pcss", "dist/css/app.css", [
   require("@tailwindcss/postcss"),
  ]);

postcss.config.mjs:

  export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

My directory setup includes:

app.pcss:

@import "tailwindcss";

@theme {
  --color-dark-charcoal: #333;
}

I am not sure what Laravel Mix is detecting to keep recompiling the files, so any help would be appreciated.


Solution

  • I found the solution for this issue -

    adding

    mix.webpackConfig({ watchOptions: { ignored: /node_modules|dist|mix-manifest.json/, }, });

    to thewebpack.mix.js resolves the looping - I have found that there is a possibility that the manifest.json is being updated and that change is detected causing a loop