Tailwind CSS 本身不支持 :has() 选择器，因其构建流程（PostCSS + PurgeCSS）会主动过滤无法静态分析的动态伪类，v3.4+ 已明确将其列入「不支持且不计划支持」清单；所有高级联动需交由原生 CSS 处理，Tailwind 仅提供语义类锚点。
Tailwind CSS 本身不支持 :has() 选择器，它不会生成任何含 :has() 的 CSS 规则；所有“高级联动”必须靠原生 CSS 配合 Tailwind 的语义类锚点来实现。
为什么 :has() 在 Tailwind 中默认不可用
Tailwind 的构建流程（PostCSS + PurgeCSS）会主动过滤掉无法静态分析的选择器，而 :has() 是运行时依赖 DOM 结构的动态伪类，PurgeCSS 无法判断它是否会被 JS 或后续 HTML 触发，因此直接丢弃。即使你手动写 @layer utilities { .has-error { &:has(.error) { @apply border-red-500; } } }，最终 CSS 文件里也不会出现这条规则。
常见错误现象：class=":has(.error):border-red-500" 完全没效果 → 这不是写法问题，是 Tailwind 根本不解析这种语法。
- Tailwind v3.4+ 已明确将
:has()列入「不支持且不计划支持」的伪类清单（官方 GitHub issue #12987） - 浏览器兼容性仍是障碍：Safari 直到 16.4 才支持
:has()，旧版 iOS WebView 全面不支持 - 即便强制注入，也无法和
dark:、group-等变体组合使用——Tailwind 的变体系统不识别:has()上下文
替代方案：用语义 class 做钩子，交给原生 CSS 处理
真正可行的做法是把联动逻辑“让渡”给原生 CSS，Tailwind 只负责提供干净、无样式的 class 名作为定位锚点。例如控制「当表单内有 .error 子元素时，整个 .form-group 边框变红」：
立即学习“前端免费学习笔记（深入）”；
.form-group:has(.error) {
@apply border-red-500;
}
但前提是：<div class="form-group"><input><span class="error">必填</span></div> ——这里 form-group 是纯语义类，不带任何 Tailwind 工具类，否则 PurgeCSS 可能误删。
- 必须在
@layer components或@layer utilities中声明，不能放在@layer base（base 层不参与 PurgeCSS 白名单） - 避免在同一个元素上混用
form-group和视觉类（如border p-4），否则 PurgeCSS 可能因未检测到该 class 的“独立使用”而清除整条规则 - Vue/React 中需用
:deep(.form-group:has(.error))或:where(.form-group):has(.error)确保穿透 scoped 封装
跨 shadow DOM 或复杂嵌套时的注意事项
如果目标结构涉及 Web Components 或框架封装的 shadow root（比如 Lit、Stencil 组件），:has() 无法穿透 shadow boundary。此时必须换思路：
- 在组件内部暴露
data-has-error属性，由 JS 监听并切换：<my-input data-has-error>→ 原生 CSS 写[data-has-error] { @apply border-red-500; } - 用
group+group-data-[error]（Tailwind v3.3+ 支持）替代：<div class="group"><input /><span class="group-data-[error]:block hidden">错误</span></div>，再由 JS 设置el.classList.toggle('group-data-[error]', hasError) - 绝对不要试图用
@apply包裹:has()规则——它会破坏 specificity，且在生产构建中大概率消失
真正难的从来不是写对 :has() 语法，而是判断什么时候该放弃它：DOM 深度超过 2 层、需要响应子组件状态、或目标环境包含旧版 Safari 时，JS 控制 class 切换比硬啃 :has() 更稳、更可测、更易调试。
