绝大多数SvelteKit项目无需手动配置postcss.config.js即可使用Tailwind CSS；强行添加易破坏热更新和构建流程，仅当存在历史配置、需特定PostCSS插件、迁移旧项目或svelte-add安装失败时才需干预。
绝大多数 SvelteKit 项目无需手动配置就能用上 Tailwind CSS，强行加 postcss.config.js 反而容易破坏热更新和构建流程。
确认你是否真需要 touch PostCSS 配置
SvelteKit 默认已集成 PostCSS，postcss.config.js 不是必需文件。只有遇到以下情况才需显式干预：
- 项目里已有
postcss.config.js，且不能删（比如团队规范或历史遗留） - 你明确用了
postcss-preset-env、cssnano等插件，且依赖它们的处理逻辑 - 你正在迁移旧 Webpack/Vite 项目，且 CSS 处理链路必须复用
-
npx svelte-add@latest tailwindcss执行失败，或生成的样式在构建后丢失
tailwind.config.js 的 content 字段必须精确覆盖所有类名来源
Tailwind 不会运行时解析 JS 变量或模板字符串，只扫描 content 列出的文件中硬编码的 class 或 className。漏掉任何一项，对应类就会被 purge 掉：
- 必须包含
./src/**/*.{html,js,svelte,ts}——注意是.html，不是只写.svelte - 若用了
+layout.svelte或+page.svelte中的内联class，也要确保路径能匹配 - 若引入了第三方 Svelte 组件库（如
flowbite-svelte、@skeletonlabs/skeleton-svelte），需显式添加其源码路径，例如：join(require.resolve('flowbite-svelte'), '../**/*.{js,svelte,ts}') - 路径必须以
./开头，写成src/**/*会被 Vite 忽略
@tailwind 指令顺序错误会导致 utilities 不生效
在主 CSS 入口（通常是 src/app.css 或 src/app.postcss）中，三行 @tailwind 必须严格按顺序出现，且不能被注释或条件包裹：
- 第一行：
@tailwind base - 第二行：
@tailwind components - 第三行：
@tailwind utilities
任何顺序调换、中间插入其他规则、或放在 @layer 外部，都会导致 utilities 类（如 text-blue-500、flex）不生效。
常见错误现象与排查点
生产构建后样式丢失、开发环境正常但 npm run build 后按钮没颜色、响应式断点失效——这些问题八成出在 content 路径或 @tailwind 顺序上：
- 检查
tailwind.config.js中content是否遗漏了.html或.ts扩展名 - 确认没有把
@tailwind utilities写在@layer components里面 - 如果用了
svelte-add安装，别再手动创建postcss.config.js——SvelteKit 会自动处理，加了反而冲突 - 构建后检查
dist/_app/immutable/assets/app.*.css，搜索某个确定使用的类名（如bg-red-500），看它是否存在；不存在就说明被 purge 了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
