PostCSS 是 Tailwind 编译必需环节，负责解析 @tailwind 指令；若未正确安装或配置，指令被忽略，导致样式丢失、purge 删除全部类，构建后 CSS 中无 utility 类。
PostCSS 是 Tailwind 编译流程的必经管道
Tailwind 的 @tailwind 指令（如 @tailwind base）不是标准 CSS，必须由 PostCSS 解析并替换为真实规则。Vite 虽内置 PostCSS，但若没装 postcss 包或没配插件，@tailwind 会被当普通注释跳过——你看到的 CSS 文件里就只剩空规则，或控制台报 Unknown at rule @tailwind。
常见错误现象：
- 本地
npm run dev正常，但npm run build后样式全丢 -
postcss.config.js存在但内容为空或插件未导出 - 用
npx tailwindcss -i input.css -o output.css构建时漏掉--content参数，导致 Purge 阶段删光所有类
tailwind.config.js 的 content 字段失效，根本原因常是 PostCSS 没加载
很多人以为 content 路径写错才导致类名被 purge，其实更隐蔽的问题是：PostCSS 根本没运行，@tailwind 指令没被处理，整个 Tailwind 层压根没注入——此时即使路径全对，生成的 CSS 也完全不包含任何 utility 类。
验证方式很简单：打开构建后的 dist/_app/immutable/assets/*.css，搜索 bg-blue-500 或 text-center。如果一个都找不到，且文件体积极小（
立即学习“前端免费学习笔记（深入）”；
关键检查点：
-
postcss.config.cjs必须存在，且module.exports显式导出插件对象：{ plugins: { tailwindcss: {}, autoprefixer: {} } } - 若
package.json设了"type": "module"，配置文件必须用.cjs后缀，否则require()失败，插件加载中断 - Vite 项目需额外安装
@tailwindcss/vite（v4+ 推荐），仅靠tailwindcss包无法接管 Vite 的 CSS 编译链
SvelteKit 中 .svelte 文件必须显式列入 content 路径
Tailwind v3+ 默认不扫描 .svelte 后缀，而 SvelteKit 的组件（如 src/lib/components/Button.svelte、src/routes/+page.svelte）全靠这个路径才能被 PurgeCSS 读到。漏掉就等于告诉 Tailwind：“这些文件里的 class 全是死代码，删”。
典型错误写法："./src/**/*" —— glob 不会自动匹配 .svelte；正确写法必须显式列出后缀："./src/**/*.{svelte,js,ts}"。
还要注意：
- 用了
shadcn-svelte或flowbite-svelte？它们的组件在node_modules里，也得加进 content 路径，否则那些预设类照样被 purge - 路径必须用相对形式（
./src），不能用src/**/*（缺./）或别名（如$lib），Tailwind 会直接跳过该 glob - 即便用了
@tailwindcss/vite插件，content字段仍不可省——插件只接管编译，Purge 逻辑仍依赖此配置
升级到 Tailwind v4 后，PostCSS 可以省略，但代价是放弃部分兼容性
Tailwind v4 引入了原生 CSS 模块支持，理论上不再强制依赖 PostCSS。但实际落地时，SvelteKit 项目仍普遍需要 postcss 和 @tailwindcss/vite：因为 Svelte 的 .svelte 文件内联样式需通过 PostCSS 管道注入，且多数第三方插件（如 @tailwindcss/typography、daisyui）仍未适配纯 CSS 模块流程。
如果你强行移除 PostCSS：
-
@layer、@apply、@screen这些指令全部失效 - 第三方插件的样式不会注入，
prose类、dark:变体等都不起作用 - 构建时可能无报错，但运行时样式缺失，问题更难定位
真正容易被忽略的点是：PostCSS 是否生效，不看有没有报错，而要看最终 CSS 文件里有没有你写的 utility 类。很多配置看似“跑通了”，其实只是前端框架把原始 CSS 当普通样式加载，Tailwind 的核心能力根本没启动。
