Put a Tailwind class on child if the parent has a specific class

[TefDesign]

Release: 3.0.18

Hello everyone,
I'm a new Tailwind user and I have a question for you please.
I would like to know if it was possible to put a Tailwind class if a parent to a specific class. FYI this class is added dynamically.

example :
I have a burger menu. I click on it, a class on the body is put. I would like a child to have, for example, a margin of 3 when the menu is open. On click, the body gets the .open-menu class

So in CSS it would look like:

body.open-menu .child {
   margin: 0.75rem
}

For now, I'm using @apply in a CSS file for this type of use.

Thanks for your help.

[sntran]

I don't think there is currently a built-in solution for this. You would need to write custom plugin for that purpose.

There is an open PR for a children variant that may help. But for your particular case, you can write a simple plugin like this:

plugin(function({ addVariant }) {
  addVariant("open-menu", ".open-menu &");
})

And you can use the variant on the child:

<div class="child open-menu:m-[0.75rem]"></div>

However, for this particular use case of yours, it's probably better to just use CSS, since there is not much reuse, unless you have multiple children that behave differently when the menu is open.

[igorkoho]

Just a reminder that if you are using the tailwind prefix feature, you'll have to add the class open-menu with the prefix applied in the template, but you'll still want to target the class without the prefix in the addVariant function

[ElegantStack]

If you have control over the parent's class names, this works without a plugin:

<div class="[--child-opacity:1]">
  <div class="opacity-[var(--child-opacity,0)]">Child Element</div>
</div>

[vrease]

You could use arbitrary groups in Tailwind to set a class on a child if parent has a certain class.
Docs https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

[sntran]

With arbitrary variant, you can just use [.body-open_&]:block.

[MuhammadRabi]

this works for me fine thank you!

[Dupflo]

Great solution !

[spaceballstheuser]

This can now be written as in-[.example]: - slightly cleaner in Tailwind v4