How to access all the direct children of a div in tailwindcss

在使用 Tailwind CSS 时，如果您想访问 div 的所有子元素并对它们应用样式，您通常会通过在父级 div 上使用 Tailwind 的 @apply 指令或直接在子元素的类中包含所需的 Tailwind 类。但是，Tailwind 默认并没有提供直接针对所有子元素的工具类。

虽然没有直接的工具类，但您可以通过写自定义的 CSS 结合 Tailwind 的工具类，来实现对所有子元素的控制。这通常是在您的项目的CSS文件中通过使用标准的CSS选择器来完成的。

以下是如何在自定义CSS中使用Tailwind类来访问和样式化div的所有子元素的示例：

css
/* 在您的项目的 CSS 文件中 */
.parent > * {
  @apply text-base p-4 border border-gray-300;
}

在这个例子中，.parent > * 选择器选中了类名为 parent 的 div 的直接子元素，并且应用了基本的文本大小 (text-base)、内填充 (p-4) 和边框样式 (border border-gray-300)。这样，所有直接子元素都会有统一的样式。

另外，如果您正在使用 Tailwind CSS v2.1 或更高的版本，并且启用了 JIT 模式，您可以使用 @variants 指令来生成响应不同状态变化的工具类。例如：

css
@variants responsive, hover, focus {
  .parent > * {
    @apply text-base p-4 border border-gray-300;
  }
}

在这个例子中，我们生成了样式在不同屏幕尺寸（响应式设计）、悬停和聚焦时的变种。

请注意，直接在HTML上大量地定制化样式可能违背了 Tailwind CSS 的实用主义原则，因此建议仅在确实需要时这样做，并且要注意维护性和性能。在可能的情况下，最好是为子元素添加特定的类以利用 Tailwind 的实用类。

In tailwind 3.1, you can use arbitrary values to target child elements.

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

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

As mentioned by @kca in the comments, space in the selectors need to be replaced by an underscore character in Tailwind classes. For example if you want to select all descendants, not just the direct children then you can use this:

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

There are three options these days.

Option 1 - Plugins

You could use these simple lines in tailwind.config.js to give you child and child-hover options.

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

Then use like this

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

Which will give every child a gray textcolor, and a blue one on hover.

See here for more information on adding variants using a plugin

Option 2 - Ad-hoc selectors

Since 4th of july 2022, Tailwind added an ad-hoc approach to target specific elements. You can now use the below without any need for plugins.

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

See the answer of @phum for more info!

Option 3 - Native child selectors

Since 19th of december 2023, Tailwind added child selectors! You can now use the below.

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

See here for the release notes.

If you want to access the direct children of div with selector, please use @layer directive. see below:

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

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

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

This is currently not possible and probably won't be implemented soon.

Instead, I recommend using this plugin: https://github.com/benface/tailwindcss-children. Follow the README for further instructions.

Usage:

After you have installed the plugin and added it to your tailwind.config.js, you can access direct children by adding children:{your_style} to the parent class. If you for example would want to add p-4 to header and content, your code would look like this:

shell
<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>

This is tailwind v1&v2 version of Willem Mulder's.

only change is variant name children instead of child

shell
 plugin(function({ addVariant, e }) {

  addVariant('children', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      const newClass = e(`children${separator}${className}`);
      return [
        `.${newClass} > *`,
        // `.${newClass}:hover `,
      ].join(",");
    });
  });

  addVariant('children-first', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      const newClass = e(`children-first${separator}${className}`);
      return [
        `.${newClass} > *:first-child`,
      ].join(",");
    });
  });

}),

add variants for padding

shell
variants: {
    padding: ['responsive', 'children', 'children-hover', 'children-first', ],
   
  },