Rückenwind-Übung mit benutzerdefinierten Klassen als Bedingungen

Question

Kann ich bei Rückenwind eine Bedingung einstellen? Wenn das übergeordnete Element eine Klasse wie „klein“ hat, verwendet dieses Element das Attribut „p-0“. Ist es möglich, dies zu erreichen, ohne alle Optionen zu schreiben, sondern etwas wie „parent-small: p-0“ zu verwenden?

Ich habe versucht, nur die notwendigen Klassen zur Stildatei hinzuzufügen, aber das führte zu vielen doppelten Klassen und ich fragte mich, ob ich dafür Rückenwind gebrauchen könnte.

Answer 1

是的！您可以考虑使用group变体，如下所示：

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