{"id":562,"hash":"cad278543202b4c122a152eceada7e5473acb0bbb513b70ab13d0d3b92aedfe0","pattern":"Tailwind and Vite warnings: "didn't resolve at build time, it will remain unchanged to be resolved at runtime"","full_message":"I'm using the following combination of technologies:\n\nSvelteKit (1.5.0, using TypeScript), with Vite (4.0.0) as the build tool that comes with SvelteKit)\nSvelte's adapter-static (2.0.1) for publishing to GitHub Pages\nTailwindCSS with the Typography plugin\nThe Inter font families via import '../inter.css'; in +layout.svelte\n\nWhen running npm run build I get a bunch of these warnings (newlines for readability:\n\n/img/logo.png referenced in D:/git/my-org/my-repo/src/app.css\n didn't resolve at build time, it will remain unchanged to be resolved at runtime\n\n/fonts/Inter-Thin.woff2?v=3.19 referenced in D:/git/my-org/my-repo/src/inter.css\n didn't resolve at build time, it will remain unchanged to be resolved at runtime\n\nFor me personally, the build output actually works, and includes all said resources. Also if I delete the output folder and generate a completely fresh build. I'm experiencing no problem or error. But the output feels like warnings to me, and \"warnings are errors from the future\"!\n\nSo, my question is: What does this message above mean, and should I treat it as a warning and change something?\n\nHow to reproduce (with Svelte)\nHere's one way to reproduce said warning:\n\nnpm create svelte@latest my-app, see https://kit.svelte.dev/docs/creating-a-project, I chose \"Skeleton Project\" with TypeScript and Prettier\nFollow https://tailwindcss.com/docs/guides/sveltekit in short:\n\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init tailwind.config.cjs -p\nthe vitePreprocess was already in my svelte.config.ts\ncontent: ['./src/**/*.{html,js,svelte,ts}'] in tailwind.config.js\nadd @tailwind directives to a new app.css file and import it in a fresh +layout.svelte file\n\nAdd Repro.
to +page.svelte\nRun npm run build\n\nIn short, it seems to be triggered by arbitrary values referencing other files? (At this point I'm not sure if Svelte is strictly needed to reproduce the issue, perhaps just Tailwind+Vite is enough?)\n\nHow to reproduce (without Svelte)\nIt can also be done without Svelte, just Tailwind in a Vite project:\n\nFollow https://vitejs.dev/guide/ (npm create vite@latest), pick \"Vanilla\"\nFollow https://tailwindcss.com/docs/guides/vite but skip the Vite creation step (already done) and add the @tailwind directives to style.css from the template\nAdd class=\"bg-[url('vite.svg')]\" to the tag\n\nThe same warning occurs here too.\n\nFootnote: I had added my repro as a comment to Vite GitHub issue which has since been marked as resolved by a PR.","ecosystem":"npm","package_name":"tailwind-css","package_version":null,"solution":"It seems like the potential solution is to declare your static paths in your vite.config.ts file. For example:\n\nimport { resolve } from 'path';\n\nconst config: UserConfig = {\n resolve: {\n alias: {\n $fonts: resolve('./static/fonts')\n }\n }\n};\n\nexport default config;\n\nOf course, this is still applicable to other Vite configurations (like for javascript).\n\nOnce you have this alias set, you can use it like this in your app.css:\n\n@font-face {\n src: url('$fonts/') format('woff2');\n /* Any other font directive */\n}\n\nPlease, note that I'm merely providing this answer to try and help anyone. Credit, however, should go to @H.B. in this other Stackoverflow question.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/75601350/tailwind-and-vite-warnings-didnt-resolve-at-build-time-it-will-remain-unchan","votes":18,"created_at":"2026-04-19T04:51:20.931232+00:00","updated_at":"2026-04-19T04:51:20.931232+00:00"}