Even/Odd in Blade loop with filtering

What seems to be the problem:
I would like to display a list of nested components and display them with zebra stripes, but I need the even/odd condition to update when items are filtered out and the remaining items change position.


<div class="flex-1 overflow-y-auto">
                @foreach ($students as $student)
                @livewire('student-list-item', $student, $loop->even, key($student->id))


public function mount($student, $even)
        $this->student = $student;
        $this->even = $even;


<a href="#"
    class="block p-4 border-b border-gray-200 hover:bg-blue-050 @if ($even) bg-gray-050 @else bg-white @endif @if ($selected) bg-blue-050 @endif"
    wire:click="$emit('setSelectedStudent', '{{ $student->id }}')">
        <span class="focus:text-indigo">{{ $student->last_name }}, </span>
        <span class="focus:text-indigo">{{ $student->first_name }}</span>
    <div class="mt-2 text-sm focus:text-indigo">{{ $student->email }}</div>

Obviously mount only runs once, so I get nice zebra stripes on load, but once I filter the results, the items all maintain their initial state. I assume I need to run an event of some sort but I’m coming up blank on how to implement that.

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples: Above

Can’t you use the odd/even pseudo-classes?


I could if I wasn’t a clueless idiot! Thanks, that worked.

For other clueless idiots like me who stumble on this, you’ll need to add a variant to your tailwind.config.js to make this work:

  variants: {
          backgroundColor: ['responsive', 'odd', 'hover', 'focus'],
1 Like