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.