Search code examples
csstailwind-csstailwind-3

Use custom class as conditions in tailwind

Can I make a condition in the tailwind that if the parent has a class for example "small", then this element will have the property "p-0" used. Is it possible to implement this without writing all the options in css, but using something like this: "parent-small: p-0"

I tried to just add the necessary classes to the style file, but this results in a lot of monotonous classes, and I would like to know if it is possible to do this using tailwind

Solution

  • Yep! You could consider using a group variant like:

    <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>