VSCode需手动设置PostCSS语言模式并安装csstools.postcss插件才能识别.postcss文件及@规则；若用Tailwind还需额外安装bradlc.vscode-tailwindcss插件，否则@apply无提示。
VSCode 默认不识别 .postcss 文件或 @apply、@tailwind 等 PostCSS 特有语法，直接写会报错、无高亮、无自动补全——必须手动关联语言模式并安装对应插件。
如何让 VSCode 识别 .postcss 文件和 @rules
VSCode 本身没有内置 PostCSS 语言支持，它依赖文件后缀或 language mode 来决定用哪种语法解析器。常见问题包括：@apply 显示为未定义、/* autoprefixer */ 注释标红、.postcssrc 文件内无高亮。
- 打开任意
.postcss文件（如postcss.config.js或纯 CSS 文件里写了@tailwind），按Ctrl+Shift+P（macOS 为Cmd+Shift+P），输入Change Language Mode，回车 - 在弹出框中选择
PostCSS（不是 CSS、not Less、not SCSS）——这是关键一步，否则后续插件无法生效 - 若列表中没有
PostCSS，说明缺少语言支持插件，需先装csstools.postcss（官方推荐）
必须安装的插件：csstools.postcss
这是目前唯一由 PostCSS 官方团队维护、且持续更新的 VSCode 插件，替代了已废弃的 ricardofbarros.postcss 和旧版 shinnn.stylelint 部分功能。
- 在扩展市场搜索
csstools.postcss，安装并重启 VSCode - 它会自动为
.postcss、postcss.config.js、.css（含 PostCSS 规则）提供语法高亮和基础校验 - 注意：它不提供自动补全
@apply（那是 Tailwind 插件的事），也不运行实际编译——只是语法层支持 - 如果用了 Tailwind，还需额外安装
bradlc.vscode-tailwindcss，否则@apply仍无提示
为什么 @apply 还是报错？
因为 @apply 是 Tailwind 的功能，不是 PostCSS 标准语法，csstools.postcss 只负责解析规则结构，不理解语义。报错通常来自 stylelint 或 vscode-css-languageservice 的误判。
- 确保
stylelint配置中启用了stylelint-config-standard+stylelint-config-recommended，并添加stylelint-config-html或stylelint-config-postcss兼容层 - 在
settings.json中加入："css.validate": false, "less.validate": false, "scss.validate": false
避免原生 CSS 校验器干扰 - 若在
.vue或.svelte文件中使用@apply，需确认对应框架插件（如volar）已启用 Tailwind 支持
PostCSS 语法支持真正的难点不在配置，而在于「多层叠加」：语言模式 + 解析插件 + linter 配置 + 框架集成。漏掉任意一环，都会表现为某处突然标红或没提示——尤其是从 Vue 单文件组件切到独立 .postcss 文件时，语言模式容易被重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
