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:

• index.html
• src/css/app.pcss
• src/js/app.js
• dist (where the compiled files go)

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.

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:

• index.html
• src/css/app.pcss
• src/js/app.js
• dist (where the compiled files go)

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.

• javascript
• tailwind-css
• laravel-mix
• postcss

2 Answers 2

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

Some file that Webpack is watching is continuously updating after TailwindCSS runs. This results in an infinite loop. You should identify which file's updates are causing the issue and exclude it from Webpack's watch list.

• watchOptions property - Webpack Docs

mix.webpackConfig({
  watchOptions: {
    ignored: /dist/,
  },
});