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.