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

Question

我有这个 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 的直接子级，这将是类为 div：“header”和“content”。

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

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

原文由 Manoj Negi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下你不能。但是，我在 tailwind.config.js 中使用这些简单的行来给我 child 和 child-hover 选项。

 plugins: [
    function ({ addVariant }) {
        addVariant('child', '& > *');
        addVariant('child-hover', '& > *:hover');
    }
],

然后像这样使用

<div class="child:text-gray-200 child-hover:text-blue-500">...</div>

这将为每个孩子提供灰色文本颜色，悬停时为蓝色文本颜色。

有关使用插件添加变体的更多信息，请参见 此处

2022 年 7 月 4 日 更新：Tailwind 添加了一种针对特定元素的临时方法。您现在可以使用 [&>*]:text-gray-200 或 [&>*:hover]:text-blue-500 来模仿上述行为。有关详细信息，请参阅@phum 的答案！

原文由 Willem Mulder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 tailwind 3.1 中，您可以使用任意值来定位子元素。

 <div class="[&>*]:p-4">...</div>
<div class="[&>p]:mt-0 ">...</div>

https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants

原文由 phum 发布，翻译遵循 CC BY-SA 4.0 许可协议