CODEWITHSUNDEEP
tailwind-css
Olmizee
Olmizee

Reputation: 17

Apply styling on parent when interacting with child Tailwind

I want to remove the shadow of parent div when the checkbox is checked. Is this possible with only tailwind?

<div class="shadow  peer">
   <input class="peer-checked:shadow-none"/>
   </div>

Upvotes: 0

Views: 5250

Answers (1)

Alexander Schranz
Alexander Schranz

Reputation: 2458

This is not possible via CSS as you only only access parent -> child and not child -> parent.

Tailwind can only do what CSS can do:

element element: div p
Selects all <p> elements inside <div> elements

element>element: div > p
Selects all <p> elements where the parent is a <div> element

element+element: div + p
Selects the first <p> element that is placed immediately after <div> elements

element1~element2: p ~ ul
Selects every <ul> element that is preceded by a <p> element

To change parent classes you would need a JavaScript implementation to add that:

<div class="shadow">
   <input type="checkbox" onchange="this.parentNode.classList.toggle('shadow')"/>
</div>

You should do this in JS component and not via inline JavaScript.

Upvotes: 1

Related Questions