Show or hide an element by parent class in Tailwind

Sep 14, 2024

Tagged: CSS

Learn a lesser-known Tailwind trick that shows or hides an element based on a parent class, using the group utility with the group-[.is-published] variant.

Little relatively unknown Tailwind trick using group:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Show only when parent has class "is-published"
  </div>
</div>

Follow @flaviocopes

Want me to talk about your product? You can sponsor this site.