Tailwind CSS: Show-hide an element based on existence of a parent class in Tailwind - css

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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>

Lessons in this unit:

0: Introduction
1: Box model properties
2: Colors
3: Typography
4: Flexbox and Grid in Tailwind
5: Modifiers
6: Responsive design in Tailwind
7: Apply a style to children with Tailwind
8: How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9: How to align center vertically using Tailwind
10: How to use custom fonts with Tailwind CSS
11: Setting up Tailwind CSS on Vite - css
12: ▶︎ Show-hide an element based on existence of a parent class in Tailwind - css
13: The Tailwind Cheat Sheet
14: How to setup Tailwind with PurgeCSS and PostCSS
15: You can’t generate classes dynamically in Tailwind