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.

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[fabriciojs]

Hey @carsonbot - I am the one who originally opened the issue but it's been a couple years now that I am not actively working with that project or any other project using Encore - so I defer any decision to the conclusions of the feedback added more recently - seems like this answer might be the one: #1026 (comment)

Cheers

[stof]

@ameotoko I suggest you to report that to the Tailwind team

[ameotoko]

@stof I'm not sure it's relevant for their docs, which just describe minimal effort needed to include generated CSS file into a Symfony ecosystem. Using and configuring webpack-dev-server would go beyond the scope of Tailwind docs.

[stof]

@ameotoko I was thinking about reporting them the missing encore_entry_script_tags line (so that for people configuring the live reload in their webpack config, it works)

[ameotoko]

@stof Yes, I understand. My point is, encore_entry_script_tags is not essential for getting TailwindCSS to work (for that, CSS file alone is enough). It is essential for those who need live reload, but that is a functionality related to Webpack (or webpack-dev-server, or BrowserSync, or Vite, whatever), not to Tailwind.

So my comment here was just a hint for the reader seeking some advice. I didn't mean it as an issue with WebpackEncore or anything else.

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[Fgruntjes]

Same issue here, really not sure what's going wrong, but I need to restart the dev server to have the changes visible. Same in watch mode. the public/build/app.css file just does not get updated in watch mode. Only when restarting encore.