如何用Tailwind实现CSS的:not(:has(div:hover)):hover选择器效果

Tailwind本身没有直接支持:has()伪类与:not()、:hover的组合写法，需要通过自定义CSS类来实现这个逻辑，以下是两种可行方案：

方案1：自定义组件类结合Tailwind #

在项目CSS文件中添加自定义类，同时保留Tailwind的基础指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

.parent-hover-outline:hover:not(:has(div:hover)) {
  outline: 5px solid black;
}

然后在HTML中给最外层div添加这个类，其他样式用Tailwind原生类实现：

<div class="max-w-[300px] max-h-[200px] bg-red-600 p-10 parent-hover-outline">
  <div class="bg-purple-600 p-10">
    <div class="bg-pink-500 w-full h-full"></div>
  </div>
</div>

方案2：集成到Tailwind工具类体系 #

如果希望自定义类完全融入Tailwind的工具类生态（支持PurgeCSS、优先级匹配等），可以用@layer utilities包裹自定义类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .hover-not-has-child-hover-outline:hover:not(:has(div:hover)) {
    outline: 5px solid black;
  }
}

HTML使用方式和方案1一致，直接添加这个工具类即可：

<div class="max-w-[300px] max-h-[200px] bg-red-600 p-10 hover-not-has-child-hover-outline">
  <div class="bg-purple-600 p-10">
    <div class="bg-pink-500 w-full h-full"></div>
  </div>
</div>

关键说明 #

:has()伪类属于CSS较新特性，确保目标浏览器支持（现代浏览器基本都已兼容）。自定义类是目前实现该选择器逻辑的唯一方式，因为Tailwind的内置语法无法直接组合这些复杂伪类。

内容的提问来源于stack exchange，提问作者Joshua Bunzel