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

Issue

I have this html:

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

I want to access the direct children of div with class "section" which would be divs with class: "header" and "content".

I know with css we can do: div.section > div

But how to do this using tailwindcss?

Solution

I use these simple lines in tailwind.config.js to give me child and child-hover options.

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

Then use like this

<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

For long, this was long the only way to do it. Since 4th of july 2022, Tailwind also added an ad-hoc approach to target specific elements. You can now use [&>*]:text-gray-200 or [&>*:hover]:text-blue-500 to mimic the above behaviour. See the answer of @phum for more info!

Answered By - Willem Mulder