Disabling HMR Prevents Tailwind from Updating

[digitalam025]

Describe the bug

I disabled HMR because it causes every tab to reload, whereas what I need is that only 1 tab to be reloaded while others stay put for me to compare the style changes visually.

By setting server.hmr to false, it does what I want, to stop HMR. But on a manual refresh in the browser, the Tailwind styles don't get updated. As if the JIT engine doesn't get re-ran.

I've discussed this not in Vite's Discord but Laravel's. But I don't think this is such a specific issue.
Link to the post here: https://discord.com/channels/297040613688475649/1024554528734969857

In the reproduction link below:

1. Replace text-red-500 with any other style, such as text-yellow-500 or text-2xl etc.
2. Save the file (index.html) and manually hit reload.
3. Notice that the style is not changed and reset to as if there were no styles present.

Reproduction

https://stackblitz.com/edit/vitejs-vite-wwtrrb?file=index.html&terminal=dev

System Info

System:
    OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (6) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 1.41 GB / 3.84 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.7.0 - ~/.nvm/versions/node/v16.14.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue2: ^1.1.2 => 1.1.2 
    vite: ^3.1.0 => 3.1.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[russelldavis]

I hit the same issue, using the latest version of vite (4.0.3) and the latest tailwind (3.2.4). Here's my workaround:

1. Instead of running vite dev, run vite build --watch --minify false --outDir dist-dev --mode development.
2. To serve the output from step 1, use any static http server in the dist-dev directory, e.g. https://github.com/vercel/serve (you can just run npx serve).

UPDATE: A much better workaround (that doesn't require running vite in build mode):

1. Install ws as a dev dependency (npm i -D ws @types/ws)
2. Add this to the top of vite.config.ts:

const wss = new WebSocketServer({port: 0}); // 0 means find a free port

3. Update your vite config to have this entry:

  server: {
    hmr: {
      clientPort: (wss.address() as AddressInfo).port
    }
  }

This creates a no-op websocket server and tells the client to talk to it instead of vite's server, effectively disabling any hmr updates.

[russelldavis]

I submitted a PR that fixes this: #11506