Odd and even row styling in Tailwind - Browser Rendering Trace

Render Flow - Odd and even row styling

Read HTML table rows

↓

Apply Tailwind odd: and even: variants

↓

Match odd rows and apply odd:bg-color

↓

Match even rows and apply even:bg-color

↓

Render rows with alternating background colors

↓

Paint and composite final table

The browser reads each table row, then Tailwind's odd: and even: variants apply background colors to odd and even rows respectively, creating a striped effect.

Render Steps - 3 Steps

Code Added:<tr> elements with no background classes

Before

[Table]
[Row 1]_________
[Row 2]_________
[Row 3]_________
[Row 4]_________

→

After

[Table]
[Row 1]_________
[Row 2]_________
[Row 3]_________
[Row 4]_________

Rows appear with default white backgrounds and no stripes.

🔧 Browser Action:Constructs DOM tree and applies default styles

Code Sample

A table with four rows where odd rows have a light gray background and even rows have a white background, creating a striped pattern.

Tailwind

<table class="w-full border-collapse">
  <tbody class="odd:bg-gray-100 even:bg-white">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
  </tbody>
</table>

Render Quiz - 3 Questions

After applying step 2, what do you see on the table rows?

A Odd rows have a light gray background, even rows remain white

B All rows have a light gray background

C Even rows have a light gray background, odd rows remain white

D No background colors are applied

Common Confusions - 2 Topics

Why don't my odd and even background colors show up?

You must apply the odd: and even: classes on the parent element containing the <tr> elements (e.g., <tbody>), not on the <tr> elements themselves or child <td> elements. Also, ensure your table rows are siblings without extra wrappers.

💡 Apply odd: and even: classes directly on parent of sibling rows (e.g., <tbody>) to see alternating backgrounds (see render_steps 2 and 3).

Why does the background color not cover the full row width?

If your table or cells have padding or border-collapse is not set, backgrounds might not fill fully. Using border-collapse: collapse on the table helps backgrounds cover entire row width.

💡 Use border-collapse: collapse on the table for full row background coverage.

Property Reference

Property	Value Applied	Target Rows	Visual Effect	Common Use
odd:bg-gray-100	bg-gray-100	Odd rows (1,3,5...)	Light gray background on odd rows	Striped table rows for readability
even:bg-white	bg-white	Even rows (2,4,6...)	White background on even rows	Contrast with odd rows for stripes
hover:bg-gray-200	bg-gray-200	Row on hover	Background changes on mouse hover	Highlight row under cursor

Concept Snapshot

Odd and even row styling uses Tailwind's odd: and even: variants. Apply odd:bg-gray-100 even:bg-white on parent of <tr> (e.g., <tbody>) for light gray on odd rows, white on even. Creates striped tables improving readability. Ensure classes are on parent of <tr> elements and table uses border-collapse: collapse.

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