Tailwind样式丢失最常见原因是content路径未显式包含.svelte文件，因v3+默认不扫描该后缀，漏掉src/lib/components/或src/routes/+page.svelte等路径会导致对应类名被purge删除。
tailwind.config.js 的 content 字段路径写错，是 SvelteKit 项目中 Tailwind 样式丢失最常见、最隐蔽的原因。 它不会报红错，但构建后 CSS 里压根没有你写的类，页面一片白板——因为 PurgeCSS 扫不到你的组件文件。
为什么 content 路径必须显式包含 .svelte 文件？
Tailwind v3+ 默认不扫描 .svelte 后缀；v4 虽有改进，但 SvelteKit 的组件路径（尤其是 src/lib/components/ 或 src/routes/+page.svelte）仍需手动声明。漏掉任意一个层级，对应组件里的类名就会被 purge 掉。
常见错误现象：
- 本地
npm run dev正常，但npm run build && npm run preview后样式消失 - 自定义组件（如
Button.svelte）里的class="bg-blue-500"不生效，但+page.svelte里写同样的类却可以 - 控制台无报错，
dist/_app/immutable/assets/下生成的 CSS 文件体积异常小（
正确配置示例（适配绝大多数 SvelteKit 项目结构）：
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{svelte,js,ts}",
"./src/routes/**/*.{svelte,js,ts}",
"./src/lib/**/*.{svelte,js,ts}",
"./node_modules/shadcn-svelte/**/*.{svelte,js,ts}",
"./node_modules/flowbite-svelte/**/*.{svelte,js,ts}"
],
theme: { extend: {} },
plugins: []
}
关键点：
- 不要只写
"./src/**/*"—— glob 不会自动匹配.svelte，必须显式列出后缀 - 如果用了 shadcn-svelte 或 flowbite-svelte，
node_modules路径也得加进去，否则它们的组件类会被 purge - 路径用相对路径（
./src），不是绝对路径或别名（如$lib）
使用 Vite 插件（Tailwind v4）时，content 还需要吗？
需要。@tailwindcss/vite 插件只是接管了 PostCSS 流程，但 Purge 逻辑依然依赖 tailwind.config.js 中的 content 配置。插件不会自动推断你的 Svelte 组件位置。
如果你删了 tailwind.config.js（某些 v4 教程建议这么做），那必须在 vite.config.ts 里显式传入 content：
import tailwindcss from '@tailwindcss/vite';
<p>export default defineConfig({
plugins: [
sveltekit(),
tailwindcss({
config: {
content: [
'./src/*<em>/</em>.{svelte,js,ts}',
'./node_modules/shadcn-svelte/*<em>/</em>.{svelte,js,ts}'
]
}
})
]
});</p>
注意：config 是插件选项，不是全局配置文件；这种写法适合极简项目，但一旦需要 theme.extend 或自定义 plugins，还是得保留 tailwind.config.js。
路径别名（$lib）会影响 content 扫描吗？
完全不影响。content 是文件系统路径扫描，和 Svelte 的 alias 配置无关。你在 svelte.config.js 里写了 "$lib": "./src/lib"，tailwind.config.js 里仍要写 "./src/lib/**/*.{svelte,js,ts}"。
容易踩的坑：
- 复制别人配置时，把
"./src/lib/**/*"写成"$lib/**/*"—— Tailwind 直接忽略该条目，且不报错 - 项目用了
src/app/lib这类非标准路径，但content还沿用默认的./src/lib，导致扫描遗漏 - CI/CD 构建时工作目录不是项目根目录，
./src变成无效路径 —— 应统一用process.cwd() + '/src'拼接（但多数情况没必要，保持相对路径即可）
真正难调试的，往往不是语法错误，而是路径漏了一层、后缀少写一个 s、或者没意识到第三方组件库也要进 content。扫完一遍 src，顺手把用到的 UI 库路径也加进去，比反复重建、清缓存、查网络请求快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
