Use of odd and even

Use the `odd` and `even` variants to style elements based on their position in a list.

TailwindCSS’s odd and even variants are powerful tools for styling elements based on their position in a list. These variants allow you to alternate styles between odd and even rows, making it particularly useful for creating visually appealing tables or lists. Here’s how you can leverage these features effectively.

Table

Use the odd and even variants to create alternating background colors in a table. This enhances readability and provides a clean, professional look to tabular data.

Customers

New users by First user primary channel group (Default Channel Group)

#	Date	Status	Customer	Product	Revenue
1	10/31/2023	Paid	Bernard Ng	Ampire Ess	$43.99
2	10/21/2023	Ref	Méschac Irung	Astrolus H	$19.99
3	05/21/2023	Can	Yves Kalume	Alt Next	$59.99
4	05/21/2023	Paid	Glodie Lukose	Radiant	$29.99

<div class="overflow-auto w-fit lg:overflow-clip">
    <div class="mb-6">
        <h2 class="text-gray-950 font-medium">Customers</h2>
        <p class="text-sm mt-1 text-gray-600">New users by First user primary channel group (Default Channel Group)</p>
    </div>
    <table class="border-collapse table-auto w-max dark:[--ui-soft-bg:var(--ui-bg)]">
        <thead class="text-title sticky z-10 top-0 bg-gray-100 border-y">
            <tr class="*:font-medium *:text-gray-950 *:text-sm *:p-3 *:text-left">
                <th>#</th>
                <th>Date</th>
                <th>Status</th>
                <th>Customer</th>
                <th>Product</th>
                <th>Revenue</th>
            </tr>
        </thead>
        <tbody class="text-sm text-gray-600">
            <tr class="*:p-3 *:border-b odd:bg-white even:bg-gray-100">
                <td>1</td>
                <td>10/31/2023</td>
                <td><span class="badge variant-success sz-xs">Paid</span></td>
                <td>
                    <div class="flex items-center gap-2 text-title">
                        <div class="avatar sz-xxs">
                            <img src="https://avatars.githubusercontent.com/u/31113941?v=4" alt="Bernard Ng" width="" height=""/>
                        </div>
                        <span class="text-gray-950">Bernard Ng</span>
                    </div>
                </td>
                <td>Ampire Ess</td>
                <td>$43.99</td>
            </tr>
            <tr class="*:p-3 *:border-b odd:bg-white even:bg-gray-100">
                <td>2</td>
                <td>10/21/2023</td>
                <td><span class="badge variant-neutral sz-xs">Ref</span></td>
                <td>
                    <div class="flex items-center gap-2 text-title">
                        <div class="avatar sz-xxs">
                            <img src="https://avatars.githubusercontent.com/u/47919550?v=4" alt="Méschac Irung" width="" height=""/>
                        </div>
                        <span class="text-gray-950">Méschac Irung</span>
                    </div>
                </td>
                <td>Astrolus H</td>
                <td>$19.99</td>
            </tr>
            <tr class="*:p-3 *:border-b odd:bg-white even:bg-gray-100">
                <td>3</td>
                <td>05/21/2023</td>
                <td><span class="badge variant-danger sz-xs">Can</span></td>
                <td>
                    <div class="flex items-center gap-2 text-title">
                        <div class="avatar sz-xxs">
                            <img src="https://avatars.githubusercontent.com/u/55670723?v=4" alt="Théo Balick" width="" height=""/>
                        </div>
                        <span class="text-gray-950">Yves Kalume</span>
                    </div>
                </td>
                <td>Alt Next</td>
                <td>$59.99</td>
            </tr>
            <tr class="*:p-3 *:border-b odd:bg-white even:bg-gray-100">
                <td>4</td>
                <td>05/21/2023</td>
                <td><span class="badge variant-success sz-xs">Paid</span></td>
                <td>
                    <div class="flex items-center gap-2 text-title">
                        <div class="avatar sz-xxs">
                            <img src="https://avatars.githubusercontent.com/u/99137927?v=4" alt="Glodie Lukose" width="" height=""/>
                        </div>
                        <span class="text-gray-950">Glodie Lukose</span>
                    </div>
                </td>
                <td>Radiant</td>
                <td>$29.99</td>
            </tr>
        </tbody>
    </table>
</div>

On this page