[JIT] Configure Chokidar to use polling, or allow users to configure it themselves

[Kocal]

Hi! 👋

I'm trying to use Tailwind with JIT support on a Symfony application which use Webpack Encore, inside a virtual machine (Virtualbox/Vagrant), with the following Tailwind configuration:

module.exports = {
  mode: 'jit',
  purge: ['./templates/**/*.html.twig', './assets/**/*.{vue,js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms')
  ],
};

When I update files from assets/, Webpack Encore is able to recompile them (thanks to watchOptions.poll) and Tailwind JIT is able to generate CSS, everything is great! 🌟

However, Twig files from templates folder are not handled by Webpack Encore but only by the Chokidar watcher from Tailwind JIT. The issue is that inside a virtual machine, Chokidar is not able to detect any changes from my Twig files.
I was able to get it working by manually by adding usePolling: true to Chokidar's options

tailwindcss/jit/lib/setupContext.js

Lines 283 to 285 in e721ace

	context.watcher = chokidar.watch([...context.candidateFiles, ...context.configDependencies], {
	ignoreInitial: true,
	})

Now the question is, what is the best option for everyone? Adding usePolling: true in JIT or add a way to let the end-user configure Chokidar as wanted?

Thanks!

[Kocal]

In fact the end-user can already enable Chokidar polling by using env var CHOKIDAR_USEPOLLING=1, so I'm not sure anymore about this discussion/feature request 😅

[mhitza]

Had the exact same issue, thanks for the Chokidar env var tip.

I think a brief note near the ---watch flag in the generated tailwindcss cli help page could be useful, even if this question was the first result for my Google search.

[Moto42]

Seconding that this needs to be better documented. I've been googling and going through the docs for hours trying to fix this.

Kocal is hero today.