Why Odd and even row styling in Tailwind? - Purpose & Use Cases

The Big Idea

Discover how a tiny styling trick can make your tables instantly easier to read and maintain!

The Scenario

Imagine you have a long list of items in a table or list, and you want to make it easier to read by coloring every other row differently.

The Problem

If you try to color rows one by one manually, you have to count and style each row yourself. This is slow, and if you add or remove rows, you must update all the colors again.

The Solution

Using odd and even row styling with Tailwind CSS, you can automatically color rows differently without counting or changing anything when the list changes.

Before vs After

✗ Before

tr:nth-child(odd) { background-color: #f0f0f0; }
tr:nth-child(even) { background-color: #ffffff; }

✓ After

class="odd:bg-gray-100 even:bg-white"

What It Enables

This lets you create clean, readable tables or lists that update styles automatically as content changes.

Real Life Example

Think of a contact list app where new contacts are added or removed often. Odd and even row styling keeps the list easy to scan without extra work.

Key Takeaways

Manually styling rows is slow and error-prone.

Odd and even row styling automates alternating colors.

Tailwind makes this easy with simple utility classes.

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