dev-server "hot" reloading with Tailwind JIT

[fabriciojs]

Hello! This is probably more like a question than any bug/feature report, so please let me know if this is out of order as an issue here.

I have setup Tailwind with their JIT mode. I figure out the proper setup and everything works good except for the Hot reloading - it DOES update the new CSS bundle upon an HTML file change... but, it does not hot-reload my HTML change.

The dev-server output (working as expected):

The WS is connected and working as expected, as far as I can tell:

But, I don't see my change taking effect until I manually refresh the page - thus, loading the changed HTML.

I assume this is a scenario specific to how Tailwind JIT works when my CSS automatically changes as I write the HTML markup.

The Encore docs on HMR indeed showcase the ability to reloading CSS and JS only, not mentioning HTML itself.

I could not find a way (looking at webpack-dev-server) to maybe change this.

So - is it possible to do something here to get a better Developer Experience for the Hot Reloading including HTML changed? I know that is it a Symfony backend serving the markup, so it's not simply static HTML to "watch" and it's not the responsibility of webpack-dev-server itself to do so. But maybe if I could hook up a page refresh myself, or if we could use some Turbo frame mix to achieve this, that would be great.

Any ideas?

[himalr]

I know this is old, but I had the same issue with "@symfony/webpack-encore": "^4.0.0" and was able to fix it by appending --live-reload to encore dev-server command in package.json

[ziat1988]

As in 2023, I'm finding also the way to deal with Tailwind and hot reload. Then I see this super cool article. So basically, I just paste this into webpack.config.js:

  .disableCssExtraction(Encore.isDevServer())
  .configureDevServerOptions(options => {
    // Watch Twig & yaml files to force reload the browser on changes:
    options.liveReload = true;
    options.watchFiles = [
      'templates/**/*.twig'
    ];

    // Disable watching the static `public` folder since it would force a live reload on any change,
    // as the manifest.json file is always re-computed (but not required by the dev server):
    options.static.watch = false;
  })

And done, anytime I change the twig file, for tailwind or anything, the browser will auto refresh.

[sovetski]

I have the same issue. I am using bootstrap and to avoid getting all unused classes for my build folder, I am also using "postcss-purgecss" which removes unused classnames. The problem is that webpack does not load my postcss config if there is no changed files by "watch", if I add "mt-5" classname for example, it will not detect this change because it is inside a ".twig" file and not "js or css". To be able to get the "mt-5" class i need to do some changes inside "assets" or re run the "npm run watch"...

[ameotoko]

Worth mentioning: if you follow "Install Tailwind CSS with Symfony" guide in Tailwind docs, watchFiles will NOT work, because their Twig snippet only shows how to include CSS entry using {{ encore_entry_link_tags('app') }}.

To make liveReload and watchFiles work, you need to import css file in your javascript, and include both using {{ encore_entry_link_tags('app') }} and {{ encore_entry_script_tags('app') }}, as described in Encore docs.