Odd and even row styling in Tailwind - Performance & Optimization

Performance: Odd and even row styling

MEDIUM IMPACT

This affects the rendering speed and visual stability of tables or lists by applying styles conditionally to rows.

Styling table rows differently for odd and even rows

Tailwind

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

Using Tailwind's odd: and even: variants applies styles via CSS pseudo-classes, reducing HTML size and improving maintainability.

📈 Performance GainTriggers zero extra reflows; styles applied purely in CSS, improving CLS and rendering speed.

Styling table rows differently for odd and even rows

Tailwind

<table>
  <tr class="bg-white">...</tr>
  <tr class="bg-gray-100">...</tr>
  <tr class="bg-white">...</tr>
  <tr class="bg-gray-100">...</tr>
</table>

Manually adding classes to each row increases HTML size and requires more DOM nodes and manual updates.

📉 Performance CostIncreases DOM size and can cause multiple reflows if classes are changed dynamically.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual class on each row	Increased DOM nodes and attributes	Multiple reflows if classes change	Higher paint cost due to more DOM	[X] Bad
Tailwind odd: and even: variants	Minimal DOM changes, styles via CSS	No extra reflows	Lower paint cost, efficient style application	[OK] Good

Rendering Pipeline

The browser applies CSS pseudo-classes during style calculation, avoiding extra DOM changes and layout recalculations.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckStyle Calculation if many complex selectors are used

Core Web Vital Affected

CLS

This affects the rendering speed and visual stability of tables or lists by applying styles conditionally to rows.

Optimization Tips

1Use CSS pseudo-classes (:nth-child) for odd/even row styling to minimize DOM changes.

2Avoid manually adding classes to each row to reduce HTML size and reflows.

3Tailwind's odd: and even: variants apply styles efficiently and improve visual stability.

Performance Quiz - 3 Questions

Which method is more efficient for styling odd and even table rows?

A Manually adding different classes to each row in HTML

B Using CSS pseudo-classes like :nth-child(odd) and :nth-child(even)

C Using JavaScript to add styles dynamically after page load

D Applying inline styles directly on each row element

DevTools: Elements

How to check: Inspect table rows and check applied CSS classes and pseudo-classes in the Styles pane; use Performance panel to record and analyze reflows.

What to look for: Look for CSS pseudo-class styles (odd/even) applied without inline styles or extra classes; check for minimal layout shifts during interaction.

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