Tailwind CSS 不内置 :has() 支持，因其为运行时动态选择器，无法静态编译；需手动在 @layer utilities 中写原生 CSS 并启用 corePlugins: { has: true }，且仅 Chrome 105+/Safari 15.4+/Firefox 121+ 支持。
has 不是 Tailwind CSS 的内置功能，Tailwind 本身不提供 :has() 选择器支持。你不能在 class 名里写 has:hover:bg-blue-500 或类似语法——它不会被解析，也不会生成对应 CSS 规则。
为什么 Tailwind 没有 :has() 工具类
Tailwind 是原子化 CSS 框架，所有工具类都映射到预定义的 CSS 声明；而 :has() 是运行时依赖 DOM 状态的动态选择器，无法在构建时静态展开。即使你手动在 tailwind.config.js 的 content 中声明了含 :has() 的字符串，Tailwind 也不会提取或生成它。
常见误解来源：有人把原生 CSS 的 :has() 和 Tailwind 的 group/peer 混为一谈，但二者机制完全不同——:has() 是浏览器原生选择器，group 是 Tailwind 设计的“状态作用域标记”。
想实现父级响应子元素状态？用 group + group-hover / group-focus
这是 Tailwind 官方推荐、稳定跨浏览器、且语义清晰的替代方案：
立即学习“前端免费学习笔记（深入）”；
-
group必须加在父容器上（如<div class="group">），它本身不带样式，只启用后代状态绑定 - 子元素用
group-hover:前缀显式声明响应逻辑，例如：group-hover:text-white、group-hover:bg-gray-100 - 多个子元素可各自独立控制是否响应、响应什么样式，避免全局污染
- 完全兼容 IE 以外所有现代浏览器（包括 Safari 14+），无兼容性断层
什么时候必须退回到原生 :has()？
只有当你要基于子元素的**非交互状态**（即不依赖 hover/focus）做父级样式联动时，才值得引入原生 :has() 并配合 Tailwind 的 @layer utilities 手动扩展：
- 表单验证场景：
.form-field:has(input:invalid)高亮整个输入区（比 JS 切 class 更轻量） - 复选框联动：
label:has(input:checked)改变 label 背景（需确保input在label内部） - 图片加载状态：
.card:has(img[src])表示内容已声明（注意：不保证加载完成）
使用时必须自己写 CSS 块并注入 @layer components 或 @layer utilities，且要检查目标浏览器是否支持 :has()（Chrome 105+/Firefox 121+/Safari 15.4+）。Safari 15.4–16.3 对兄弟选择器支持不稳定，别写 :has(.trigger + .content)。
最容易被忽略的细节
很多人试过 group-hover 失效，其实问题不在 Tailwind —— 而是子元素自身写了硬编码颜色（如 text-gray-500），导致 group-hover:text-white 被层叠覆盖。解决方法只有两个：!important（不推荐）或改用更具体的选择器权重（比如把 group-hover:text-white 换成 group-hover:*:text-white，需开启 experimental.optimizeUniversalDefaults）。真正干净的做法，是让子元素默认无文本色声明，把颜色控制权完全交给 group 状态。
