如何用途：在tailwind.css中not()？

bvk5enib 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(363)

我最近开始在我的Nuxt项目中给予tailwind.css，所以我需要使用:not(:last-child)伪元素，但我没有找到方法。

<ul>
    <li
      v-for="(item, index) in items"
      :key="`item-${index}`"
      class="border-solid border-b border-black"
    >
      Item
    </li>
  </ul>

我想给所有的<li>添加一个border-bottom，除了最后一个。
我知道Tailwind有第一个和最后一个伪类变量，但我不能将它们与:not()一起使用

css

来源：https://stackoverflow.com/questions/61455473/how-to-use-not-in-tailwind-css

3条答案

按热度按时间

toiithl61#

答案在您分享的文档中指向last的链接中。
只需将last:border-b-0添加到所有列表项中，如果border-bottom是last-child，则它将删除border-bottom。

<ul>
  <li
    v-for="(item, index) in items"
    :key="`item-${index}`"
    class="border-solid border-b border-black last:border-b-0"
  >
    Item
  </li>
</ul>

赞(0）回复(0）举报 2022-11-19

g9icjywg2#

已测试
也可以通过选择要编辑的索引号来执行此操作
我将改变第一个，下面所有的都应该有一个样式

<div
                    v-for="(item, i) in items"
                    :key="i"
                    :class="{ 'mx-0': i === 0, 'mx-4': i > 0 }"
                  >
                  </div>

因此FIRST元素的索引从0开始，因此我们的边距为x0，
并且所有下面的将具有余量× 4。

赞(0）回复(0）举报 2022-11-19

jaxagkaj3#

你可以使用Tailwind的任意变体：

<li class="[&:not(:last-child)]:border border-sky-500">Item</li>

此功能从Tailwind v3开始提供。

赞(0）回复(0）举报 2022-11-19

我来回答

如何用途：在tailwind.css中not()？

3条答案

相关问题

热门标签

最新问答