使用自定义类作为条件的Tailwind实践-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

使用自定义类作为条件的Tailwind实践

P粉513316221 2023-09-08 14:08:57

[CSS3讨论组]

867

我可以在tailwind中设置一个条件吗？如果父元素有一个类，比如“small”，那么这个元素将使用属性“p-0”。是否可能在不写入所有选项的情况下实现这一点，而是使用类似于“parent-small: p-0”这样的方式？

我尝试只向样式文件添加必要的类，但这会导致很多重复的类，我想知道是否可以使用tailwind来实现这一点。

P粉513316221

全部回复(1)

P粉4389183232023-09-09 00:47:42 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>