使用Tailwind CSS为Eleventy/Nunjucks列表首尾项设样式失效问题

你的HTML结构不符合规范：<ul>的直接子元素必须是<li>，但你把<a>放在了<li>外面，导致<ul>的子元素变成了<a>标签。此时每个<li>都是其父元素<a>的唯一子元素，所以first:bg-red-300和last:bg-cyan-300会匹配所有<li>（因为每个<li>都是自己父级的第一个也是最后一个子元素）。

调整结构，把<a>标签放到<li>内部，确保<ul>的直接子元素是<li>，这样Tailwind的first:和last:伪类就能正确识别列表的首尾项：

<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="block w-full" href="{{ contact.link }}">
        {{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
      </a>
    </li>
  {% endfor %}
</ul>

额外说明：给内部的<a>加上block w-full类，确保整个列表项区域都能被点击，避免只有文字区域可点击的问题。

内容的提问来源于stack exchange，提问作者Dan Sinker