0
0
Tailwindmarkup~5 mins

Odd and even row styling in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Odd and even row styling helps make tables easier to read by coloring rows differently. It separates information visually like stripes on a zebra.

When showing a list of items in a table to improve readability.
When displaying data like schedules, invoices, or reports.
When you want to highlight alternate rows for better focus.
When designing forms or lists where users scan rows quickly.
Syntax
Tailwind
class="odd:bg-color even:bg-color"

Use odd: to style odd-numbered rows and even: for even-numbered rows.

These classes work on elements containing the rows, such as <tbody> or <ul>, not directly on the rows themselves.

Examples
This colors odd rows light gray and even rows white in a table.
Tailwind
<tbody class="odd:bg-gray-100 even:bg-white">...</tbody>
This changes text color for odd and even list items.
Tailwind
<ul class="odd:text-blue-600 even:text-red-600"><li>Item</li></ul>
This applies different green backgrounds to odd and even div rows.
Tailwind
<div class="odd:bg-green-50 even:bg-green-100"><div>Row</div></div>
Sample Program

This example shows a simple user table. Odd rows have a light gray background, and even rows are white. This makes it easier to follow each row across the table.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Odd and Even Row Styling</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <main>
    <h1 class="text-2xl font-bold mb-4">User List with Odd and Even Row Colors</h1>
    <table class="w-full border-collapse">
      <thead>
        <tr class="bg-gray-300">
          <th class="border p-2 text-left">Name</th>
          <th class="border p-2 text-left">Email</th>
          <th class="border p-2 text-left">Role</th>
        </tr>
      </thead>
      <tbody class="odd:bg-gray-100 even:bg-white">
        <tr>
          <td class="border p-2">Alice</td>
          <td class="border p-2">alice@example.com</td>
          <td class="border p-2">Admin</td>
        </tr>
        <tr>
          <td class="border p-2">Bob</td>
          <td class="border p-2">bob@example.com</td>
          <td class="border p-2">User</td>
        </tr>
        <tr>
          <td class="border p-2">Carol</td>
          <td class="border p-2">carol@example.com</td>
          <td class="border p-2">Editor</td>
        </tr>
        <tr>
          <td class="border p-2">Dave</td>
          <td class="border p-2">dave@example.com</td>
          <td class="border p-2">User</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Make sure your parent container (like <tbody>) wraps the rows for odd/even styling to work.

You can combine odd/even with other Tailwind utilities for text, borders, or spacing.

Test your colors for good contrast to keep your table accessible.

Summary

Odd and even row styling helps separate rows visually for easier reading.

Use odd: and even: prefixes in Tailwind to style rows differently.

This technique works well for tables, lists, and repeated content blocks.