Svelte+TypeScript项目Tailwind CSS样式不渲染及配置报错求助

问题根源 #

你使用npm create vite@latest创建的是Vite版Svelte+TypeScript项目，但套用了SvelteKit的Tailwind配置指南——两者目录结构存在差异，导致Tailwind无法扫描到目标文件，触发内容配置为空的警告。

解决方案 #

1. 修正tailwind.config.cjs的Content路径
   将配置中的content路径从./webapp/**/*.{svelte,html,ts}改为指向Vite Svelte项目的源码目录src：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{svelte,html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 确认文件结构与导入路径

• 确保app.css位于src根目录下
• src/routes中的组件导入../app.css的路径是正确的（若routes在src子目录下）

3. 强制生效配置

• 删除项目根目录下的node_modules/.vite缓存文件夹
• 重启Vite开发服务器

补充说明 #

SvelteKit项目默认会有特定的路由目录结构，但Vite初始化的Svelte项目所有源码都集中在src目录下。Tailwind的content配置必须指向实际存在的文件路径，否则会判定为无内容可扫描，进而抛出警告。

内容的提问来源于stack exchange，提问作者Coder Dad