What is the correct way to apply classes dynamically to odd/ even rows of Table TR element using Tailwind CSS

Question

Trying to alternate row colors in my tailwindcss styled page, the code below has no effect on my <tr>s:

<style>
    tr:nth-child(even) {
        class="bg-gray-50";
    }
    tr:nth-child(od) {
        class="bg-white";
    }
</style>

What am I missing out please?

Answer 1

Add even and odd prefixes to your class list

<tbody>
    <tr class="even:bg-gray-50 odd:bg-white"></tr>
</tbody>

See First, last, odd, and even from their documentation