如何在 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的直接子级，这将是带有类：“header”和“content”的div。

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

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

Answer 1

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

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

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

正如 @kca 在评论中提到的，选择器中的空格需要用 Tailwind 类中的下划线字符替换。例如，如果您想选择所有后代，而不仅仅是直接子代，那么您可以使用以下命令：

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

Answer 2

目前有三种选择。

选项 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>

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

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

选项 2 - 临时选择器

自 2022 年 7 月 4 日起，Tailwind 添加了一种针对特定元素的临时方法。您现在可以使用以下内容，无需任何插件。

<div class="[&>*]:text-gray-200 [&>*:hover]:text-blue-500">...</div>

有关更多信息，请参阅@phum 的答案！

选项 3 - 原生子选择器

自 2023 年 12 月 19 日起，Tailwind 添加了子选择器！您现在可以使用以下内容。

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

请参阅此处了解发行说明。