使用 Tailwind 打开时如何设置 <details> 标记的样式

【问题标题】：How to style the <details> tag when open using Tailwind使用 Tailwind 打开时如何设置 <details> 标记的样式
【发布时间】：2021-11-17 12:47:31
【问题描述】：

在 css 中，当标签打开时，我使用它来设置另一个元素的样式。使用 Tailwind 怎么可能做到这一点？

.filesParent[open] .class {
// styles..
 }

【问题讨论】：

标签： tailwind-css

【解决方案1】：

你可以在你的 tailwind css 文件中添加规则。

https://tailwindcss.com/docs/installation#using-a-custom-css-file

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .filesParent[open] .class {
    // styles..
  }
}

【讨论】：

【解决方案2】：

我最终在 Tailwind.scss 文件中使用了 @apply 规则

.FilesParent[open] .class {
  @apply text-red-violet-500
}

【讨论】：