<p>PostCSS语法高亮全灰是因为Sublime未将文件识别为PostCSS：需安装hazmi版插件，手动绑定.pcss后缀，并在.css首行顶格添加/ syntax: postcss /，同时禁用内置CSS语法避免冲突。</p>
PostCSS语法高亮为什么全是灰色？
不是插件没装，是Sublime根本没把文件当PostCSS解析。默认情况下，.pcss后缀不绑定任何语法，.css文件更默认走内置CSS语法——它不认识@layer、@container、:has()，自然全灰或报红。
- 装插件只是第一步：用Package Control搜“PostCSS”，必须选
hazmi版（2026年3月起支持@container和color-mix()） - 手动绑定语法：打开任意
.pcss文件 → 右下角点击当前语法名 → 选PostCSS；再点一次 →Open all with current extension as…→PostCSS -
.css文件想走PostCSS？必须在**第一行顶格**写/* syntax: postcss */（前后无空格、无BOM、无空行），否则Sublime直接忽略 - 禁用Sublime自带CSS语法：菜单 →
View → Syntax → CSS，切到别的再切回来，避免残留冲突
postcss-preset-env配置后新特性还是原样输出？
它不是装上就自动降级的“魔法开关”，没配stage和targets，等于没开电源。
-
stage至少设为3：低于这个值，nesting、container-query等常用特性不会启用 -
targets必须显式声明：比如{"chrome": "45", "ie": "11"}，漏掉ie，那IE里gap就裸奔 - 别依赖
autoprefixer顺带处理新特性：它只加前缀，不降级语义；postcss-preset-env需单独启用features，例如"container-query": true - 顺序不能错：Webpack中
postcss-loader的plugins数组里，postcss-preset-env必须在autoprefixer之前
为什么@supports selector(:has(a))在IE里不生效？
因为IE压根不认@supports selector()这个语法，连兜底逻辑都进不去——这不是PostCSS能解决的问题，是浏览器能力边界。
-
@supports只能检测属性和值（如display: grid），**无法检测选择器是否被支持** - Chrome 110+才开始支持
@supports selector()，Safari ≤15.3、Firefox ≤108、所有IE版本都不识别 - 运行时检测要分两步：
CSS.supports('selector(:has(a))')先判断API是否存在，再执行；IE11连CSS.supports都没有，得先判空 - 降级不是翻译：没有工具能把
:has(.active)自动转成兼容写法，只能靠JS动态加class，或重构DOM结构提前暴露状态
Tailwind混写时补全失效、颜色乱套怎么办？
PostCSS语法包只管规则结构（@layer、嵌套），不管框架语义（@apply、theme('colors.blue.500')）。这不是bug，是设计如此。
立即学习“前端免费学习笔记（深入）”；
-
@apply在PostCSS语法下仍是“未知函数”，不会触发补全；变量名变白，是因为Sublime没内置Tailwind语义理解 - 补全得靠额外插件：
Tailwind CSS IntelliSense目前只官方支持VS Code，Sublime暂无等效替代 - 临时方案：在
.css顶部加/* syntax: postcss */，配合Emmet或Better Completion提示基础类名 - 颜色混乱大概率是Sublime内置CSS语法没关干净：菜单 →
View → Syntax → CSS确认已切换，否则双语法并存会导致伪类、自定义属性着色异常
真正卡住人的地方，往往不是“有没有装插件”，而是/<em> syntax: postcss </em>/是否真在第一行、Sublime内置CSS语法是否彻底关闭、以及postcss-preset-env的targets有没有漏掉关键浏览器——这三个点漏掉任何一个，@container就永远是红色波浪线。
