Pratique Tailwind utilisant des classes personnalisées comme conditions

Question

Puis-je définir une condition par vent arrière ? Si l'élément parent a une classe, telle que "small", alors cet élément utilisera l'attribut "p-0". Est-il possible d'y parvenir sans écrire toutes les options, mais en utilisant quelque chose comme « parent-small : p-0 » ?

J'ai essayé d'ajouter uniquement les classes nécessaires au fichier de style, mais cela entraînait de nombreuses classes en double et je me demandais si je pouvais utiliser tailwind pour y parvenir.

Answer 1

Oui ! Vous pouvez envisager d'utiliser la group variante comme indiqué ci-dessous :

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