Description
When using @source directive to watch PHP files (or other non-JS/CSS files), changes to those files trigger a CSS HMR update instead of a full page reload on Vite 7.1+. This breaks the expected behavior where template file changes should cause a full page refresh.
Reproduction
Environment:
@tailwindcss/vite: 4.1.18 (also tested with 4.1.11)tailwindcss: 4.1.18vite: 7.3.1 (broken) vs 7.0.6 (works)
Setup:
/* main.css */
@import "tailwindcss";
@source "../../**/*.php";
Steps:
- Run
vite dev server
- Edit a PHP file that matches the
@source pattern
- Save the file
Expected behavior:
Console shows: [vite] (client) page reload /path/to/file.php
Actual behavior (Vite 7.1+):
Console shows: [vite] (client) hmr update /styles/main.css
The CSS is rebuilt correctly, but no full page reload occurs to reflect template/markup changes.
Potential Root Cause
Vite 7.1+ introduced Environment API changes that affect how plugins trigger full page reloads:
| Old API (Vite ≤7.0.6) |
New API (Vite 7.1+) |
server.ws.send({ type: 'full-reload' }) |
server.hot.send({ type: 'full-reload' }) |
handleHotUpdate hook |
hotUpdate hook |
The @tailwindcss/vite plugin appears to use the older API, which no longer triggers full page reloads in newer Vite versions.
Reference: https://vite.dev/changes/hotupdate-hook
Workaround
Pin Vite to version 7.0.6 in package.json:
{
"devDependencies": {
"vite": "7.0.6"
}
}
Description
When using
@sourcedirective to watch PHP files (or other non-JS/CSS files), changes to those files trigger a CSS HMR update instead of a full page reload on Vite 7.1+. This breaks the expected behavior where template file changes should cause a full page refresh.Reproduction
Environment:
@tailwindcss/vite: 4.1.18 (also tested with 4.1.11)tailwindcss: 4.1.18vite: 7.3.1 (broken) vs 7.0.6 (works)Setup:
Steps:
vitedev server@sourcepatternExpected behavior:
Console shows:
[vite] (client) page reload /path/to/file.phpActual behavior (Vite 7.1+):
Console shows:
[vite] (client) hmr update /styles/main.cssThe CSS is rebuilt correctly, but no full page reload occurs to reflect template/markup changes.
Potential Root Cause
Vite 7.1+ introduced Environment API changes that affect how plugins trigger full page reloads:
server.ws.send({ type: 'full-reload' })server.hot.send({ type: 'full-reload' })handleHotUpdatehookhotUpdatehookThe
@tailwindcss/viteplugin appears to use the older API, which no longer triggers full page reloads in newer Vite versions.Reference: https://vite.dev/changes/hotupdate-hook
Workaround
Pin Vite to version 7.0.6 in
package.json:{ "devDependencies": { "vite": "7.0.6" } }