如何访问tailwindcss中div的所有直接子级？答案

【问题标题】：How to access all the direct children of a div in tailwindcss?如何访问tailwindcss中div的所有直接子级？
【发布时间】：2021-07-11 04:06:07
【问题描述】：

我有这个 html：

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

我想访问具有类“section”的 div 的直接子级，这将是具有类：“header”和“content”的 div。

我知道使用 css 我们可以做到：div.section > div

但是如何使用 tailwindcss 做到这一点？

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

如果要使用选择器访问 div 的直接子级，请使用@layer 指令。见下文：

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

@layer base {
  div.section > div {
    @apply text-xl;
  }
}

https://tailwindcss.com/docs/adding-base-styles

【讨论】：

【解决方案2】：

这目前是不可能的，可能不会很快实施。

相反，我建议使用这个插件：https://github.com/benface/tailwindcss-children。请按照自述文件获取更多说明。

用法：

安装插件并将其添加到您的tailwind.config.js 后，您可以通过将children:{your_style} 添加到父类来访问直接子类。例如，如果您想将p-4 添加到header 和content，您的代码将如下所示：

<div class="section children:p-4">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

【讨论】：

您的答案可以通过提供解决方案示例及其对 OP 的帮助来改进。