Watch doesn't deliver changes when using Sass and Tailwind

• Laravel Mix Version: 6.0.39 (npm list --depth=0)
• Node Version (node -v): 17.0.1
• NPM Version (npm -v): 8.1.0
• OS: macOS Monterey v12.1

Description:

Hi, I’m using Laravel Mix with Tailwind 3.0.7.

This is mine webpack.mix.js file:

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

mix
  .setPublicPath('dist')
  .browserSync({
    proxy: "http://localhost:10004",
    files: [
      'dist/**/**',
      'resources/**/**',
      '**/*.php',
    ],
  });

mix
  .js('resources/scripts/app.js', 'js')
  .js('resources/scripts/admin.js', 'js')
  .js('resources/scripts/tinymce-buttons.js', 'js')
  .autoload({
    jquery: [
      '$',
      'window.jQuery',
    ],
  });

mix
  .sass('resources/styles/app.scss', 'css')
  .sass('resources/styles/admin.scss', 'css')
  .sass('resources/styles/editor.scss', 'css');

mix
  .options({
    processCssUrls: false,
    postCss:        [
      tailwindcss('./tailwind.config.js'),
    ],
  });

mix
  .copy('resources/images', 'dist/images')
  .copy('resources/fonts', 'dist/fonts');

mix
  .version()
  .sourceMaps();

This is the content of tailwind.config.js file:

module.exports = {
  mode:    'jit',
  content: [
    './**/*.php',
    './resources/scripts/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Steps To Reproduce:

Everything works fine except watch. If I use commands npx mix build or npx mix --production it builds properly everything. But if I use npx mix watch it starts server with port 8000 and it reloads page properly after I make some change but build is not fresh. Not only that it doesn’t compile changes on Tailwind classes but also other changes in my scss files. Basically it always delivers old files created after last npx mix build.

If I remove this part

    postCss:        [
      tailwindcss('./tailwind.config.js'),
    ],

then all changes in scss files are properly compiled when using npx mix watch.

Did anyone had some problems like these? Am I doing something wrong?

[florianbouvot]

@lexo-mpuzovic it seems to be an issue in tailwindcss: https://github.com/tailwindlabs/tailwindcss/issues/4838

[JBraddockm]

I am aware of that specific issue. I don’t have it in my project so I can’t comment on it. However, I can see that scss files are not added to JIT watch in OP’s tailwind config, which is something I also experienced when I added files and folders to my projects but forgot to update the config file.