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

Title: How to Access All Child Elements of a div in TailwindCSS?

Content:

In Tailwind CSS v3.1, you can use arbitrary values to target child elements.

html
<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, spaces in selectors need to be replaced with an underscore character in Tailwind classes. For example, if you want to select all descendants (not just direct children), you can use:

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

There are three options for handling child elements:

Option 1 - Plugins
Add these lines to tailwind.config.js to define child and child-hover variants:

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

Usage example:

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

Option 2 - Ad-hoc Selectors
Since July 4, 2022, Tailwind supports ad-hoc selectors without plugins:

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

See @phum's answer for more details.

Option 3 - Native Child Selectors
Since December 19, 2023, Tailwind added native child selectors:

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

See release notes for details.

If you need to access direct children via selectors, use the @layer directive:

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

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

https://tailwindcss.com/docs/adding-base-styles
This approach is currently not recommended as it may conflict with Tailwind's utility-first philosophy.

Instead, use this plugin: https://github.com/benface/tailwindcss-children. Follow the README for instructions.

Usage Example:

After installing the plugin and adding it to tailwind.config.js, access direct children by adding children:{your_style} to the parent class. For example:

html
<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 the Tailwind v1 & v2 version of Willem Mulder's implementation. The only change is the variant name children instead of child.

Plugin Implementation:

js
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:

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

Key Notes:

• When using Tailwind CSS, to access all child elements of a div and apply styles, you typically use the Tailwind @apply directive on the parent div or include required Tailwind classes directly in child elements' classes. However, Tailwind does not provide direct utility classes for all child elements by default.
• Although no direct utility classes exist, you can achieve control over all child elements by writing custom CSS combined with Tailwind's utility classes. This is typically done in your project's CSS file using standard CSS selectors.
• Example:

  css
  .parent > * {
    @apply text-gray-200;
  }
  .parent > *:hover {
    @apply text-blue-500;
  }

  Here, .parent > * targets direct child elements of the div with class parent, applying basic text color (text-gray-200) and hover effect (text-blue-500). This ensures consistent styling across all direct children.
• For responsive states, use @variants with padding variants:

  css
  @variants {
    padding: ['responsive', 'children', 'children-hover', 'children-first'];
  }

  This generates styles for different screen sizes (responsive design), hover, and focus states.
• Important: Extensively customizing styles directly in HTML may contradict Tailwind CSS's utility-first principle. Therefore, do this only when necessary, while considering maintainability and performance. When possible, add specific classes to child elements to leverage Tailwind's utility classes.