必须安装csstools.postcss插件并手动切换语言模式为postcss，否则vscode不识别@rules；@apply需额外装bradlc.vscode-tailwindcss；autoprefixer需本地依赖、postcss.config.js和codeactionsonsave三者齐全。
必须装 csstools.postcss，否则所有 @rules 都不识别
VSCode 默认根本不认识 @apply、@tailwind、@import（PostCSS 版）、@layer 这些规则——不是你写错了，是编辑器压根没加载 PostCSS 解析器。装完插件后，还必须手动切换语言模式：打开任意 .css 或 .postcss 文件，按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Change Language Mode，回车后选 PostCSS（注意不是 CSS/SCSS/Less）。如果列表里没有 PostCSS，说明插件没装成功或没重启 VSCode。
@apply 依然标红？那是 Tailwind 的事，得另装插件
csstools.postcss 只负责语法结构解析，不理解 @apply 的语义，所以它不会提供补全、也不会压制报错。要解决这个，必须额外安装 bradlc.vscode-tailwindcss。但有两个硬性前提：
-
tailwind.config.js必须存在且可读（插件靠它生成类名索引） - VSCode 当前打开的是项目根目录（不是子文件夹），否则插件找不到配置
- 若在
.vue或.svelte文件中用@apply，还要确认volar或svelte-vscode已启用 Tailwind 支持
保存时自动加前缀？codeActionsOnSave + 本地依赖缺一不可
装了 autoprefixer 却没反应，90% 是因为 VSCode 没把 PostCSS 接入保存流程。编辑器默认只做格式化（如 Prettier），不跑转换。实操要点：
- 本地安装依赖：
npm install -D postcss autoprefixer postcss-nesting（全局安装无效） - 项目根目录放
postcss.config.js，内容至少含plugins: { autoprefixer: {} } - 关掉
editor.formatOnSave，改用：{ "editor.codeActionsOnSave": { "source.fixAll.postcss": true } } - 确保已安装支持该 code action 的插件（如
PostCSS Language Support (Syler)；仅高亮的插件不带保存处理能力）
postcss.config.js 放错位置，整个功能就失效
VSCode 插件和 CLI 都严格按工作区根目录向上查找 postcss.config.js，不是看当前文件在哪，而是看 VSCode 打开的文件夹路径。常见踩坑点：
- 在
src/子目录下打开index.css，但postcss.config.js在上层project/目录 → 不生效 - 用了多根工作区，某个文件夹没配
postcss.config.js→ 该文件夹下保存零反应 - 配置文件名写成
postcss.config.cjs或.postcssrc→ 多数插件只认postcss.config.js - 验证方法：终端进项目根目录，运行
npx postcss input.css -o output.css，成功说明配置位置和内容正确
真正的难点不在单点配置，而在于语言模式、插件、linter、框架支持四层叠加。漏掉任意一环，就会在某个文件类型或某个目录下突然标红——尤其是从 Vue 单文件切到独立 .postcss 文件时，语言模式容易被重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
