必须安装 csstools.postcss 插件并手动切换语言模式为 postcss，否则 vscode 不识别 @rules 且无语法高亮；@apply 等需额外安装 bradlc.vscode-tailwindcss；autoprefixer 需本地依赖、postcss.config.js 和 codeactionsonsave 配置三者齐全。
PostCSS 语法高亮和 @rules 提示必须装 csstools.postcss
VSCode 默认完全不认识 @apply、@tailwind、@import（PostCSS 版）这些规则，也不会给 .postcss 文件着色——不是你写错了，是它根本没加载解析器。
必须手动安装官方插件：csstools.postcss（由 PostCSS 团队维护，已取代所有旧插件）。装完后，还需主动切换语言模式：
- 打开任意
.postcss或含@规则的.css文件 - 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS） - 输入
Change Language Mode→ 回车 → 选PostCSS（注意：不是CSS，也不是SCSS） - 若列表里没有
PostCSS，说明插件没装成功或没重启 VSCode
这一步漏掉，后面所有补全、高亮、校验都无效。
@apply 还是标红？那是 Tailwind 的事，不是 PostCSS 的
@apply 是 Tailwind 提供的指令，csstools.postcss 只负责解析语法结构，不理解语义。所以即使语言模式对了、插件也装了，@apply 依然会报“unknown at-rule”。
解决方法只有一个：额外装 bradlc.vscode-tailwindcss 插件。它专为 Tailwind 设计，能识别 @apply、@layer、@screen 并提供类名补全。
注意两个前提：
-
tailwind.config.js必须存在且可读（插件会扫描它来构建类名索引） - VSCode 当前工作区根目录得是项目根目录（否则插件找不到配置）
- 若在
.vue或.svelte文件中用@apply，还要确认volar或svelte-vscode已启用 Tailwind 支持
保存时自动加前缀？得配 codeActionsOnSave + 本地插件
装了 autoprefixer 却保存没反应，90% 是因为 VSCode 没把 PostCSS 接入保存流程。编辑器默认只做格式化（如 Prettier），不跑转换。
要让保存触发 autoprefixer，三步缺一不可：
- 项目本地装依赖：
npm install -D postcss autoprefixer（全局安装无效） - 根目录放
postcss.config.js，内容至少含plugins: { autoprefixer: {} } - 在
settings.json里加：{ "editor.codeActionsOnSave": { "source.fixAll.postcss": true } }
另外，"editor.formatOnSave": false 建议关掉，避免和 Prettier 冲突；如果用了 stylelint，也建议关掉原生 CSS 校验："css.validate": false，防止误报。
browserslist 配置错，autoprefixer 就白配
autoprefixer 加不加前缀、加哪些，100% 取决于 browserslist。VSCode 插件读的也是项目级配置，不是你脑子里想的“IE11 必须支持”。
检查方式很简单：
- 终端进项目根目录，运行：
npx browserslist，看输出是否符合预期 - 若输出为空或报错，说明
browserslist字段缺失或位置不对（应放在package.json或独立.browserslistrc） - 常见有效写法：
"browserslist": ["last 2 versions", "> 1%", "not dead"]
别信 VSCode 编辑器里的“绿色对勾”——它只校验语法，不跑真实转换。真正兼容性得靠构建时执行 npx postcss 验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
