如何使用Tailwind为打开状态的<details>标签关联元素设置样式

要实现<details>标签打开状态下修改子元素样式的效果，Tailwind有两种常用实现方案，和你给出的原生CSS效果完全等价：

方案1：使用group + group-open修饰符（官方推荐写法） #

这是最符合Tailwind使用习惯的写法，适配性最高：

• 首先给<details>标签添加group类，将其标记为状态父组
• 给需要适配打开状态的子元素添加group-open:前缀的样式类，所有带此前缀的样式只会在父级group元素处于open状态时生效

代码示例：

<!-- 父级details元素 -->
<details class="group filesParent">
  <summary>文件列表</summary>
  <!-- 目标子元素 -->
  <div class="class group-open:bg-gray-100 group-open:p-2 group-open:rounded">
    展开时我会新增灰色背景、内边距和圆角
  </div>
</details>

如果页面存在多个嵌套的group，可以给组命名避免状态冲突：

<details class="group/file-list filesParent">
  <summary>文件列表</summary>
  <div class="class group-open/file-list:bg-gray-100">
    仅响应名为file-list的组的open状态
  </div>
</details>

方案2：使用任意选择器变体 #

如果不想给元素额外加group类，可以直接在父级<details>上通过方括号语法定义自定义选择器样式，和你写的原生CSS逻辑完全一致：

<details class="filesParent [&[open]_.class]:bg-gray-100 [&[open]_.class]:p-2 [&[open]_.class]:rounded">
  <summary>文件列表</summary>
  <div class="class">
    展开时我会新增灰色背景、内边距和圆角
  </div>
</details>

注：以上两种写法都需要Tailwind CSS v3及以上版本支持。

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