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.
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