适用于第一个和最后一个列表项，tailwind css

【问题标题】：apply to first and last list items, tailwind css适用于第一个和最后一个列表项，tailwind css
【发布时间】：2022-12-13 03:14:34
【问题描述】：

我在 eleventy/nunchucks 中生成一个列表，需要使用 tailwind 来设计第一个和最后一个项目的样式。但是，出于某种原因，它将样式更改应用于列表中的每个项目。

这是我的代码：

    <ul role="list" class="">
        {% for contact in contacts %}
    <a rel="me" class="" href="{{ contact.link }}">
    <li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
      {{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
    </li></a>
{% endfor %}
  </ul>
</div>

【问题讨论】：

标签： tailwind-css eleventy

【解决方案1】：

它将 first:bg-red-300 和 last:bg-cyan-300 应用于每个 li 元素，因为 a 元素中只有一个 li。

你想要做的是将 a 包裹在 li 元素中是这样的：

<ul role="list" class="">
 {% for contact in contacts %}
    <li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
       <a rel="me" class="" href="{{ contact.link }}">
         {{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
       </a>
    </li>
  {% endfor %}
</ul>

【讨论】：