Transform for child element by parent element tailwind

Question

I want transform child element rotate if parent element have class open. Example in css

ul li.open > a > .sidebar-collapse-icon {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

How can I do it in tailwind?

Answer 1

As of Tailwind 3.1, this can be done with arbitrary variants:

Here is the generic syntax to use this feature:

<div class="[&>*]:text-lg">
  <div>This element will have the `text-lg` class applied to it.</div>
  <div>So will this one!</div>
</div>

You can use generic CSS selectors to target child elements:

<div class="[&>*:first-child]:text-lg">
  <div>This element will have the `text-lg` class applied to it.</div>
  <div>This element will be unchanged.</div>
</div>

You can also can target specific elements by class name:

<div class="[&>*.make-me-red]:bg-red-500">
  <div>This element will be unchanged.</div>
  <div class="make-me-red">This element will have a red background.</div>
</div>

---

To answer this topic's question, this example will not be rotated since the parent element doesn't have the open class:

<ul class="[&.open>*]:rotate-180">
  <li>I'm not upside-down yet...</li>
</ul>

Now, when we add the open class to the parent, the modifier class will be activated:

<ul class="open [&.open>*]:rotate-180">
  <li>I'm upside-down now!</li>
</ul>

You can even target specific children with the relevant selectors:

<ul class="open [&.open>*:first-child]:rotate-180">
  <li>I'm upside-down!</li>
  <li>I'm not upside down!</li>
</ul>