Odd and even row styling in Tailwind

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">[e-mail]</td>
          <td class="border p-2">Admin</td>
        </tr>
        <tr>
          <td class="border p-2">Bob</td>
          <td class="border p-2">[e-mail]</td>
          <td class="border p-2">User</td>
        </tr>
        <tr>
          <td class="border p-2">Carol</td>
          <td class="border p-2">[e-mail]</td>
          <td class="border p-2">Editor</td>
        </tr>
        <tr>
          <td class="border p-2">Dave</td>
          <td class="border p-2">[e-mail]</td>
          <td class="border p-2">User</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>

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.

Practice

1. What does the odd: prefix do in Tailwind CSS when applied to a list of rows?

easy

A. It styles all rows the same way.

B. It removes styling from odd rows.

C. It styles only the even-numbered rows.

D. It styles only the rows with odd numbers differently.

Solution

1. Step 1: Understand the odd: prefix meaning

   The odd: prefix targets elements in odd positions (1st, 3rd, 5th, etc.) in a list or table.

2. Step 2: Apply to rows

   When used on rows, it applies styles only to those odd-numbered rows, leaving even rows unaffected.

3. Final Answer:

   It styles only the rows with odd numbers differently. -> Option D

4. Quick Check:

   odd: = odd rows styled [OK]

Hint: Remember odd means 1st, 3rd, 5th rows styled [OK]

Common Mistakes:

• Confusing odd with even rows
• Thinking it styles all rows
• Assuming it removes styles

2. Which of the following is the correct Tailwind syntax to style even rows with a gray background?

easy

A. even:bg-gray-200

B. odd:bg-gray-200

C. bg-gray-200:even

D. bg-gray-200-odd

Solution

1. Step 1: Identify the correct prefix for even rows

   The prefix for styling even rows in Tailwind is even:.

2. Step 2: Combine prefix with background color

   To style even rows with a gray background, use even:bg-gray-200.

3. Final Answer:

   even:bg-gray-200 -> Option A

4. Quick Check:

   Prefix even: + class = even:bg-gray-200 [OK]

Hint: Use even: before class for even rows [OK]

Common Mistakes:

• Using odd: instead of even:
• Placing prefix after class
• Using invalid class names

3. Given this HTML snippet with Tailwind classes:

<ul>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 1</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 2</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 3</li>
  <li class="odd:bg-blue-100 even:bg-green-100">Item 4</li>
</ul>

What background colors will the items have?

medium

A. All items have green background.

B. Items 1 and 3 have blue; Items 2 and 4 have green.

C. Items 1 and 3 have green; Items 2 and 4 have blue.

D. All items have blue background.

Solution

1. Step 1: Understand odd and even row styling

   Items in odd positions (1, 3) get bg-blue-100, even positions (2, 4) get bg-green-100.

2. Step 2: Match items to colors

   Item 1 and 3 have blue background; Item 2 and 4 have green background.

3. Final Answer:

   Items 1 and 3 have blue; Items 2 and 4 have green. -> Option B

4. Quick Check:

   odd = blue, even = green [OK]

Hint: Odd items get first color, even items get second color [OK]

Common Mistakes:

• Swapping odd and even colors
• Assuming all items have same color
• Ignoring the prefixes

4. You wrote this code to style table rows:

<tr class="odd:bg-gray-100 even:bg-white">...</tr>

But the even rows are not white, they remain gray. What is the likely problem?

medium

A. The even: prefix is not supported on <tr> elements.

B. You need to add table-auto class to the table.

C. The parent <tbody> or <table> is missing, so odd/even can't apply.

D. You must use bg-white without prefix for even rows.

Solution

1. Step 1: Check odd/even styling context

   Odd and even styling depends on the element's position among siblings inside a parent container like <tbody>.

2. Step 2: Identify missing parent container

   If <tr> elements are not inside <tbody> or <table>, the browser may not count rows correctly, so even rows don't get styled.

3. Final Answer:

   The parent <tbody> or <table> is missing, so odd/even can't apply. -> Option C

4. Quick Check:

   Odd/even needs proper parent container [OK]

Hint: Ensure rows are inside <tbody> for odd/even to work [OK]

Common Mistakes:

• Thinking even: doesn't work on <tr>
• Forgetting to wrap rows in <tbody>
• Using wrong class order

5. You want to style a list so odd rows have a light blue background and even rows have a light green background, but only if the row contains text longer than 10 characters. Which Tailwind approach works best?

hard

A. Use odd:bg-blue-100 even:bg-green-100 and add JavaScript to add a class for long text rows.

B. Use odd:bg-blue-100 even:bg-green-100 and rely on CSS :has() selector with Tailwind plugin.

C. Use only bg-blue-100 for all rows and ignore text length.

D. Use inline styles with JavaScript to check text length and set background colors.

Solution

1. Step 1: Understand Tailwind limitations

   Pure Tailwind odd: and even: prefixes cannot condition styles on text content length, as CSS lacks selectors for character count.

2. Step 2: Best hybrid approach

   Apply odd:bg-blue-100 even:bg-green-100 classes to rows and use JavaScript to detect text length >10 characters, then add a modifier class (e.g., long-text). Combine with custom variants like long-text:odd:bg-blue-100 via Tailwind config or arbitrary variants for conditional application.

3. Final Answer:

   Use odd:bg-blue-100 even:bg-green-100 and add JavaScript to add a class for long text rows. -> Option A

4. Quick Check:

   Tailwind classes + JS for content length [OK]

Hint: Tailwind odd/even + JS class for dynamic content checks [OK]

Common Mistakes:

• Expecting pure CSS :has() to handle text length
• Using inline styles instead of Tailwind classes
• Ignoring the need for JS in content-based conditions