apply to first and last list items, tailwind css

I'm generating a list in eleventy/nunchucks and need to style the first and last items using tailwind. However, for some reason it's applying the style change to every item in the list.

Here's my code:

    <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>

It is applying first:bg-red-300 and last:bg-cyan-300 to every li element because you have only one li inside the a element.

What you want to do is wrap the a inside the li element Something like this:

<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>