You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using Tailwind CSS v4 via @import "tailwindcss"; in index.css and the @tailwindcss/vite plugin, the Vite development server crashes during Hot Module Replacement (HMR) if an asset (e.g., an SVG imported via standard ?url import) is deleted.
Steps to Reproduce:
Clone the reproduction repository: git clone https://github.com/geomaster/vite-tailwind-v4-svg-delete-repro
Install dependencies: pnpm install
Start the Vite dev server: pnpm dev
In another terminal, run the following command while the dev server is running:
sed -i '/import iconUrl from/d' src/App.tsx && sed -i '/<img src={iconUrl}/d' src/App.tsx && rm src/assets/icon.svg &&echo"Triggered bug sequence."
(This removes the JS import, the usage in JSX, and then deletes the SVG file)
Observe the terminal running pnpm dev.
Observed Behavior:
The Vite dev server crashes with an ENOENT: no such file or directory error trying to open the deleted SVG file. The error trace points to the vite:css-analysis plugin and mentions the src/index.css file, even though src/index.css does not directly reference the SVG via url():
[plugin:vite:css-analysis] ENOENT: no such file or directory, open '/home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/src/assets/icon.svg'
/home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/src/index.css
at async open (node:internal/fs/promises:638:25)
at async Object.readFile (node:internal/fs/promises:1242:14)
at async fileToDevUrl (file:///home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:13597:21)
at async TransformPluginContext.transform (file:///home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:48876:27)
at async EnvironmentPluginContainer.transform (file:///home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:47680:18)
at async loadAndTransform (file:///home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:41327:27)
at async viteTransformMiddleware (file:///home/geomaster/Projects/test/vite-tailwind4-asset-delete-repro/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:42807:24
Expected Behavior:
The Vite dev server should handle the file deletion gracefully via HMR without crashing. The component using the deleted asset should update (likely showing an error or missing image in the browser), but the server itself should remain running.
Important Notes:
This crash does not occur if the @import "tailwindcss"; line is removed from src/index.css.
This crash does not occur when using Tailwind CSS v3 (with @tailwind directives and the PostCSS plugin setup) under the same conditions.
The issue seems independent of how the SVG is imported (tested with standard ?url import here, originally found with vite-plugin-svgr).
The text was updated successfully, but these errors were encountered:
First: it doesn't matter how long it takes you to delete the asset after deleting the reference to it. It doesn't even matter if you restart the server in between. It only matters that you referenced the asset at one point, and the asset no longer exists. Though, restarting the server while the asset is deleted will fix it.
Secondly: restoring the asset will get the server to function again without having to restart it. Though deleting the asset will break the server again. And, if you restore the asset while the server is off, the server will still break if you delete it again.
What version of Tailwind CSS are you using?
tailwindcss v4.1.1, @tailwindcss/vite v4.1.1
What build tool (or framework if it abstracts the build tool) are you using?
Vite v6.2.5
What version of Node.js are you using?
v22.13.1
What browser are you using?
N/A (Issue occurs in Vite dev server during HMR)
What operating system are you using?
Linux 6.13.7-arch1-1 #1 SMP PREEMPT_DYNAMIC Thu, 13 Mar 2025 18:12:00 +0000 x86_64 GNU/Linux
Reproduction URL
https://github.com/geomaster/vite-tailwind-v4-svg-delete-repro
Describe your issue
When using Tailwind CSS v4 via
@import "tailwindcss";
inindex.css
and the@tailwindcss/vite
plugin, the Vite development server crashes during Hot Module Replacement (HMR) if an asset (e.g., an SVG imported via standard?url
import) is deleted.Steps to Reproduce:
git clone https://github.com/geomaster/vite-tailwind-v4-svg-delete-repro
pnpm install
pnpm dev
pnpm dev
.Observed Behavior:
The Vite dev server crashes with an
ENOENT: no such file or directory
error trying to open the deleted SVG file. The error trace points to thevite:css-analysis
plugin and mentions thesrc/index.css
file, even thoughsrc/index.css
does not directly reference the SVG viaurl()
:Expected Behavior:
The Vite dev server should handle the file deletion gracefully via HMR without crashing. The component using the deleted asset should update (likely showing an error or missing image in the browser), but the server itself should remain running.
Important Notes:
@import "tailwindcss";
line is removed fromsrc/index.css
.@tailwind
directives and the PostCSS plugin setup) under the same conditions.?url
import here, originally found withvite-plugin-svgr
).The text was updated successfully, but these errors were encountered: