使用自訂類別作為條件的Tailwind實踐

Question

我可以在tailwind中設定一個條件嗎？如果父元素有一個類，例如“small”，那麼這個元素將使用屬性“p-0”。是否可能在不寫入所有選項的情況下實現這一點，而是使用類似於“parent-small: p-0”這樣的方式？

我嘗試只向樣式文件添加必要的類，但這會導致很多重複的類，我想知道是否可以使用tailwind來實現這一點。

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>