Tailwind practice using custom classes as conditions

Question

Can I set a condition in tailwind? If the parent element has a class, such as "small", then this element will use the attribute "p-0". Is it possible to achieve this without writing all the options, but using something like "parent-small: p-0"?

I tried adding only the necessary classes to the style file, but this resulted in a lot of duplicate classes and I was wondering if I could use tailwind to achieve this.

Answer 1

Yes! You may consider using the group variant like this:

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="group">
  <div class="p-10 bg-red-200 group-[.small]:p-0">
    Foo
  </div>
</div>

<div class="group small">
  <div class="p-10 bg-green-200 group-[.small]:p-0">
    Bar
  </div>
</div>