英文:
Use custom class as conditions in tailwind
问题
在Tailwind中，可以使用以下方式实现条件样式：
<div class="parent-small:p-0">...</div>
这将在父元素具有"class='small'"时应用样式"p-0"到该元素。这种方式可以帮助你避免编写冗长的重复样式类。
英文:
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
答案1
得分: 0
是的！你可以考虑使用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>
英文:
Yep! You could consider using a group variant like:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论