Search code examples
tailwind-csstailwind-variants

first: and last: , even: and odd: don't work on "tailwindcss": "^3.1.6"

so I'm learning tailwind CSS but when I arrived at variants I got stuck

so when I use first: and last: only first works and it gets applied to all my list elements, it is supposed to work only to the first one, its the same for even and odd, please help me out

1

<ol class=" first:bg-green-500 last:bg-black">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
   </ol>
Solution

  • This classes should be applied on child elements, not parent

    <ul class="">
  <li class="first:bg-green-500 last:bg-black">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black">Lorem ipsum dolor sit amet.</li>
</ul>

    DEMO

    In case you HAVE control over every element it is better to change style on exact element

    <ul class="">
  <li class="bg-green-500">Lorem ipsum dolor sit amet.</li>
  <li class="">Lorem ipsum dolor sit amet.</li>
  <li class="">Lorem ipsum dolor sit amet.</li>
  <li class="">Lorem ipsum dolor sit amet.</li>
  <li class="">Lorem ipsum dolor sit amet.</li>
  <li class="bg-black">Lorem ipsum dolor sit amet.</li>
</ul>

    This utility class is very useful when working with loops. For example

    <ul class="">
    <!-- Some Loop -->
  @foreach($els as $el)
    <li class="first:bg-green-500 last:bg-black">First will be green, last will be black.</li>
  @endforeach
</ul>